@import url('zhtml.css?v=11');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

BODY {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 20px;
    position: relative;
    }

HEADER {
    border-top: 4px solid #a2b0ba;
    background: #fff;
    -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 3px 0 rgba(0,0,0,.15);
    overflow: hidden;
    }

    HEADER SECTION {}

        HEADER SECTION H1 {
            font-size: 40px;
            margin: .5em 0 .35em;
            }

        HEADER SECTION H3 {
            font-size: 20px;
            margin: .5em 0;
            }

MAIN {}

    MAIN SECTION {}

FOOTER {}

    FOOTER SECTION {
        color: #777;
        font-size: 12px;
        text-align: center;
        margin: 1em auto;
        }

        FOOTER SECTION A { color: #888; text-decoration: none; }
        FOOTER SECTION A:hover { color: #aaa; text-decoration: underline; }

        FOOTER SECTION .cb {
            text-align: justify;
            margin-bottom: 2em;
            }

H1 {
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    margin: .5em 0 .35em;
    }

H1.first { text-align: center; }

H2 {
    font-size: 30px;
    font-weight: 700;
    text-align: left;
    margin: 1em 0 .75em;
    }

.insertion.logo {
    margin: 2em 0;
    }

.cdate {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    background-color: #a2b0ba;
    padding: .5em 1em;
    margin: 0 .25em;
    position: absolute;
    top: 0px;
    right: 2vw;
    z-index: 9999;
    }

.ctrl-toggle {
    font-family: Verdana;
    font-size: 12px;
    letter-spacing: .02em;
    line-height: 1.25em;
    vertical-align: middle;
    border: 1px solid #999;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #aaa;
    -webkit-box-shadow: inset 0 1px 4px 0 rgba(0,0,0,.35);
    box-shadow: inset 0 1px 4px 0 rgba(0,0,0,.35);
    padding: 2px;
    margin: 0 .75em;
    display: inline-block;
    overflow: hidden;
    }

    .ctrl-toggle A {
        color: #fff;
        text-decoration: none;
        vertical-align: middle;
        padding: .15em .75em;
        display: inline-block;
        }

    .ctrl-toggle B {
        color: #666;
        font-weight: normal;
        vertical-align: middle;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background: #eee;
        -webkit-box-shadow: inset 0 -1px 2px 0 rgba(0,0,0,.25);
        box-shadow: inset 0 -1px 2px 0 rgba(0,0,0,.25);
        padding: .15em .75em;
        display: inline-block;
        }

.video {
    color: #fff;
    margin: 1em auto;
    max-width: 800px;
    position: relative;
    }

    .video .player {
        margin: 0 auto;
        width: 760px;
        height: 427.5px;
        position: relative;
        }

        .video .player IFRAME {
            width: 760px;
            height: 427.5px;
            position: relative;
            z-index: 999;
            }

        .video .player .imute {
            background-image: url(../i/imute.png);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 40px;
            position: absolute;
            top: 6px;
            right: 6px;
            width: 20px;
            height: 20px;
            z-index: 9999;
            cursor: pointer;

            opacity: 0.35;
            filter: alpha(opacity=35); /* For IE8 and earlier */
            }

        .video .player .imute:hover {
            opacity: 1;
            filter: alpha(opacity=100); /* For IE8 and earlier */
            }

        .video .player .imute.unmuted {
            background-position: -20px 0;
            }

    .video .notification {
        text-align: center;
        margin: .5em 0;
        }

        .video .notification A {
            color: #999;
            font-size: 14px;
            font-weight: bold;
            line-height: 1.25em;
            text-decoration: none;
            background-image: url(../i/unmute.png);
            background-position: right;
            background-repeat: no-repeat;
            background-size: 1.5em;
            padding-right: 1.75em;
            }

        .video .notification A:hover { color: #aaa; }
        .video .notification.passive A:hover { color: #999; }

.unmutes {
    text-align: center;
    top: 170px;
    left: -280px;
    right: -280px;
    position: absolute;
    z-index: 1;
    }

    .unmutes A.lt { float: left; }
    .unmutes A.rt { float: right; }

    .unmutes A {
        color: #000;
        font-family: Arial;
        font-size: 24px;
        font-weight: bold;
        letter-spacing: -.02em;
        text-decoration: none;
        border-bottom: 5px solid #c90;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        background-color: #ffbf00;
        background-image: url(../i/unmute.png);
        background-position: top center;
        background-repeat: no-repeat;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.35);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.35);
        padding: 1.65em .5em .45em .5em;
        display: inline-block;

        -webkit-transition: all 222ms ease;
        -moz-transition: all 222ms ease;
        -ms-transition: all 222ms ease;
        -o-transition: all 222ms ease;
        transition: all 222ms ease;
        }

    .unmutes A:hover {
        background-color: #ffcf22 !important;

        -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
        box-shadow: 0 3px 6px 0 rgba(0,0,0,.15);
        margin: -1px 0 1px;

        -webkit-transition: all 222ms ease;
        -moz-transition: all 222ms ease;
        -ms-transition: all 222ms ease;
        -o-transition: all 222ms ease;
        transition: all 222ms ease;
        }

    .unmutes A.highlight {
        background-color: #ffdd93;
        }

.pbutton {
    text-align: center;
    margin: 2em 0;
    }

    .pbutton A {
        color: #593400;
        font-size: 48px;
        font-weight: 800;
        text-decoration: none;
        text-shadow: 0 1px 1px #fff;
        border-bottom: 6px solid #ffae00;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        background-color: #ffd600;
        padding: .35em 1em;
        display: inline-block;
        position: relative;

        -webkit-transition: all 333ms ease;
        -moz-transition: all 333ms ease;
        -ms-transition: all 333ms ease;
        -o-transition: all 333ms ease;
        transition: all 333ms ease;
        }

    .pbutton A:hover {
        border-bottom: 6px solid #ffbe33;
        background-color: #ffde33;

        -webkit-transition: all 333ms ease;
        -moz-transition: all 333ms ease;
        -ms-transition: all 333ms ease;
        -o-transition: all 333ms ease;
        transition: all 333ms ease;
        }

.price {
    color: #060;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    margin: 0;
    }

.pricing {
    margin: 2em auto;
    max-width: 600px;
    }

    .pricing .column {
        font-size: 14px;
        text-align: center;
        }

        .pricing .column H4 {
            font-size: 20px;
            margin-bottom: .25em;
            }

        .pricing .column STRIKE {
            color: #c00;
            font-size: 40px;
            line-height: 1.5em;
            display: block;
            }

        .pricing .column STRONG {
            color: #060;
            font-size: 30px;
            line-height: 1.5em;
            display: block;
            }