/* The Modal (background) */
#intro-video-container {
    display: none;
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
}
#intro-video-container.minimized {
    z-index: 999; /* Sit on top */
    left: auto;
    top: auto;
    width: 400px;
    height:auto;
    position: fixed;
    bottom:20px;
    right:20px;
}

#intro-video-container.maximized {
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.maximized .intro-video-inner {
    width: 960px; /* Could be more or less, depending on screen size */
    height: 540px;
}
#video-close {
    display:none;
}
.closeable #video-close {
    display: inline-block;
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAACYCAMAAACoAftQAAAAvVBMVEUAAAAAAAAAAAAODg4AAAAAAAAAAADNzc0BAQHZ2dkDAwMHBwcAAADf398CAgI/Pz8BAQEAAACCgoIcHBzl5eUAAAC/v7/x8fEGBgZnZ2cAAADs7OwGBgb4+Pg/Pz/Jycmenp5nZ2f39/eDg4MAAADQ0ND4+Piurq7a2tr8/Pzs7OwAAAD5+fn9/f3e3t4AAAD///9OTk7BwcE1NTWsrKyNjY2cnJx6enpdXV1oaGgsLCy6uroiIiLOzs5BQUFt3PCNAAAAL3RSTlMAAQMIDRIZHSMnLTpESFNVXWlpbG15en+HiZCWoaGssrO2vsDFydPU3uL4+fr9/Ywv6xsAAAQVSURBVHhe7JZbc6JMGIQXAUOQEMi3uMYkrmopZgqs5ujZ//+zvpdNzMsMlli1N3uRvtCbpzo9I+nmhyqN9OO6GNQ6Ha1SG0mcrhskXe90rvKE6kbX7r9MF4vp2887nfBrqPW0xJemD4w32e7jHIj2602SbNZ7Qfgd0zJLtgKi2B0+tSsE3h8u0RX7HGGfHWrK9oiIbrK69SiQHxTliO5VWtP0rrNEemhoj6muaYqx2XuGyJrwbgUKohhb3hIFM6wCC7Zm4+M5Zs5fpKNiTYndEOUHDFRYCeADLvGiy7DtL7E5/12gJPacalPlqEc2eoFAdmCa2UOGyOhoUuQgwo7PxCwJMGXYGcQMlyCVX3DchCkGs3V6h0iFgyUSZsuS6QQLGaYDhueUHxhf3RpzOqB8dRMcz84lf5FS9A1Ngi2PQm8PF7RBZOnEyqFnSC/BKX6bHQmucpB13mRzCJtTsPUowlpl14if2JifUXcwgeqdA2OLn1C+PdsbzCKkW0a3KeKxbbAxF4FJ9EgAaXGqyFORAuLZNrkMZNoNKnNS9PE5dpltFofjB4PJXIAk5rP/HMu4Ukmm7XjEkwLfc2yT66tJk7lp2T2H1LMtk2wVVsWpcE0SlW4DbeLE/xG3eRvfQv7Fptw4KvpDNRKLt1/3rZty/xbjrPef1+5D018ITYttkiTrfAUsrmzK3RTIT/woHxH3DaZl9h2rRH2aX0ydaYb1BVK1zNdA32RvNn7DkVmmoyeVJvYBMcdl5Vg2/lW0zpSbUNIKT12KLV8wVjsmNvGW63feU3qj86veGQmAA1e5qzbStNZdmVTlRzzbSjG+4+t4u1iqjxxjR6pczaiNBCCVXoGx25X7mUNGgJBHM/QsXWp+dk4U5xJjX4EXSM7ACcCxnnnm2zI8rxVoFgMr/lUwUpyNPvYVx/eRfaUSQzkzLWxEOVhiwynCAd2GvCm/2bquBPEo+LxnDv0YXdyfFOHQP+8EV/kY0enSorxyitoLxxwiabDRqDImWF2JJVBIeVNEk2HgsDGn7vkhcPy67lMOiBGF4AGS3tX8yYqAfb5eF/kRiMPX4cDjEDLd8wezJT4lwtHrMHBtbg6V9oLhYDYLw3A2eSVbn0elSdMCecFg+Ee0Kq7dlftLXSCrRxNE8lzH7hp0Nu3qpHQty7Ztq2sabHvtpb/SLauisVTye1O+N2Ubbxhu2xSAq6x1UwoAWfum8P3Gu5ZNYaUA2jaFJYCofVPYOWnZFD4TcLpxU1ZAnN24KRnfxQ2bshEE/Vub8r0p35vi/t9eHRoBDMNQDJUvMLkOkDMM+8D7b9cR+kOKLPy4juojnQeAkWWVAyLLLINVdovj44N8LOqi/3Djxo0bN5ZvdbWJuwHhrw2ILYdqBwDT2fEEXtrZFmVcCWLiAAAAAElFTkSuQmCC);
}
.closeable #video-close a{
    display: block;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 80411;
}


.intro-video {
    background-color: #fefefe;
    margin: 0; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
}

/* Modal Content/Box */
.maximized .intro-video {
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}
.maximized .intro-video iframe {
    width: 100%; /* Could be more or less, depending on screen size */
    height:100%;
}

.minimized .intro-video {
    width: 400px; /* Could be more or less, depending on screen size */
    position: fixed;
    bottom:20px;
    right:20px;
    /*right:10vw;*/
}
.minimized .intro-video iframe {
    width: 400px; /* Could be more or less, depending on screen size */
    height:224px;
}
#minimize-note {
    font-size:13px;
    position: relative;
    top:-5px;
}
.minimized #minimize-note {
    display:none;
}
.maximized #minimize-note {
    display:inline;
}
#video-toggle a {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('img/max.svg') no-repeat;
    margin: 0 0 0 8px;
    position: relative;
    top:5px;
}
.maximized #video-toggle a {
    background-image: url('img/min.svg');
}
.minimized #video-toggle a {
    background-image: url('img/max.svg');
}
.minimized .intro-video-title h3 {
    font-size:16px;
}
.minimized #video-toggle a {
    top:0;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
} 

/* Video Title */
.intro-video-title {
    float:left;
}

/* Video Controls */
.intro-video-controls {
    margin:0;
    padding:0;
    list-style: none;
    overflow:hidden;
    float:right;
}
.intro-video-controls li {
    margin-left:0px;
    display: inline;
}

@media only screen and (max-width: 980px), screen and (max-height: 625px) {
    .maximized .intro-video-inner {
        width: 600px;
        height: 337px;
    }
    .intro-video-title h3 {
        font-size:16px;
    }
    .maximized .intro-video {
        width: 600px;
    }

    .maximized #minimize-note {
        width: 190px;
        line-height: 12px;
        display: inline-block;
        top: -4px;
        font-size: 12px;
    }
}