* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    line-height: 1.7em;
    color: #7f8c8d;
    font-size: 13px;
    background-color: #192168;
    
}

table{
    color:white
}
p{
    color:white
}

#sectvideo{        height: 95%;
    background-color: #192168;
    padding-top:2em;
    padding-left:2em;
    padding-right:1em;
    
}


#sectchat{        height: 95%;
    background-color: #192168;
    padding-top:2em;
    padding-right:2em;
    padding-left:1em;
}

    

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #ffffff;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
    text-align: center;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
    background-color:#AF1E2D; 
}
.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 120%;
    font-family: Pirata One;
}

.home-menu .pure-menu-selected a {
    color: white;
    font-family: Pirata One;
}

.home-menu a {
    color: white;
    font-family: Pirata One;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: white;
    font-family: Pirata One;
}


/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {

    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 88%;
    top: 0;
    left: 0;
    position: fixed !important;
      width: 100vw;
        height: 98vh;
        background-color: #192168;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 2em;
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 20px;
    font-weight: bold;
    color: white;
    border: 3px solid white;
    padding: 1em 1.6em;
    font-weight: 100;
    border-radius: 5px;
    line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: white;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: absolute;
    top: 87%;
    width: 100%;
    min-height: 12%;
    z-index: 2;
    background: white;

}

/* We want to give the content area some more padding */
.content {
    padding: 1em 1em 3em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
}
    .content-subhead i {
        margin-right: 7px;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #2d3e50;
    color: #aaa;
}

/* This is the class used for the footer */
.footer {
    background: #111;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }
        .home-menu ul {
            float: right;
        }

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 50%;
        height: 50%;
    }

    .splash-head {
        font-size: 250%;
    }


    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }

}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
}


#mobiletxt {
    text-align: center;
 }

/* unvisited link */
a:link {
  color: #ffffff;
  font-size: 120%;
}

/* visited link */
a:visited {
  color: #ffffff;
}

/* mouse over link */
a:hover {
  color: #ffffff;
}

/* selected link */
a:active {
  color: #ffffff;
}

.video-js {
    /* The base font size controls the size of everything, not just text.
       All dimensions use em-based sizes so that the scale along with the font size.
       Try increasing it to 15px and see what happens. */
    font-size: 10px;
    /* The main font color changes the ICON COLORS as well as the text */
    color: #fff;
}

/* The "Big Play Button" is the play button that shows before the video plays.
   To center it set the align values to center and middle. The typical location
   of the button is the center, but there is trend towards moving it to a corner
   where it gets out of the way of valuable content in the poster image.*/
.vjs-sublime-skin .vjs-big-play-button {
    /* The font size is what makes the big play button...big.
       All width/height values use ems, which are a multiple of the font size.
       If the .video-js font-size is 10px, then 3em equals 30px.*/
    font-size: 8em;
    /* We're using SCSS vars here because the values are used in multiple places.
       Now that font size is set, the following em values will be a multiple of the
       new font size. If the font-size is 3em (30px), then setting any of
       the following values to 3em would equal 30px. 3 * font-size. */
    /* 1.5em = 45px default */
    line-height: 1.5em;
    height: 1.5em;
    width: 3em;
    /* 0.06666em = 2px default */
    border: 0;
    /* 0.3em = 9px default */
    border-radius: 0.3em;
    /* Align center */
    left: 50%;
    top: 50%;
    margin-left: -1.5em;
    margin-top: -0.75em;
}

/* The default color of control backgrounds is mostly black but with a little
   bit of blue so it can still be seen on all-black video frames, which are common. */
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-volume-menu-button .vjs-menu-content,
.video-js .vjs-volume-panel .vjs-volume-control {
    /* IE8 - has no alpha support */
    background-color: #2B333F;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: rgba(43, 51, 63, 0.7);
    background-color: transparent;
}

/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider {
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    height: 6.5px;
}

/* The slider bar color is used for the progress bar and the volume bar
   (the first two can be removed after a fix that's coming) */
.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
    background: #fff;
}

.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div,
.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
    height: 6.5px;
}

/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
    /* For IE8 we'll lighten the color */
    background: ligthen(#73859f, 25%);
    /* Otherwise we'll rely on stacked opacities */
    background: rgba(115, 133, 159, 0.5);
}

/* The load progress bar also has internal divs that represent
   smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
    /* For IE8 we'll lighten the color */
    background: ligthen(#73859f, 50%);
    /* Otherwise we'll rely on stacked opacities */
    background: rgba(115, 133, 159, 0.75);
}

.vjs-sublime-skin .vjs-poster {
    outline: none; /* Remove Blue Outline on Click*/
    outline: 0;
}

.vjs-sublime-skin:hover .vjs-big-play-button {
    background-color: transparent;
}

.vjs-sublime-skin .vjs-fullscreen-control:before,
.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
    content: ''; /* Remove Fullscreen Exit Icon */
}

.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
    background: #fff;
}

.vjs-sublime-skin .vjs-fullscreen-control {
    border: 3px solid #fff;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: -7px;
    top: 50%;
    height: 14px;
    width: 22px;
    margin-right: 10px;
}

.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after {
    background: #000;
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 5px;
}

.vjs-sublime-skin .vjs-progress-holder {
    margin: 0;
}

.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after {
    border-radius: 2px;
    display: block;
    height: 6.5px;
}

.vjs-sublime-skin .vjs-progress-control .vjs-load-progres,
.vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
    border-radius: 2px;
    height: 6.5px;
}

.vjs-sublime-skin .vjs-playback-rate {
    display: none; /* Remove Playback Rate */
}

.vjs-sublime-skin .vjs-progress-control {
    margin-right: 50px;
}

.vjs-sublime-skin .vjs-time-control {
    right: 55px;
}

.vjs-sublime-skin .vjs-volume-menu-button:before {
    width: 1.2em;
    z-index: 1;
}

.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu,
.vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu,
.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu {
    display: block;
    opacity: 1;
}

.vjs-sublime-skin .vjs-volume-menu-button,
.vjs-sublime-skin .vjs-volume-panel {
    width: 6em;
    position: absolute;
    right: 0;
    margin-right: 30px;
}

.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content,
.vjs-sublime-skin .vjs-volume-menu-button:hover,
.vjs-sublime-skin .vjs-volume-menu-button:focus,
.vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active,
.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control,
.vjs-sublime-skin .vjs-volume-panel:hover,
.vjs-sublime-skin .vjs-volume-panel:focus,
.vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
    width: 6em;
}

.vjs-sublime-skin .vjs-volume-menu-button .vjs-menu {
    left: 23px;
}

.vjs-sublime-skin .vjs-mouse-display:before,
.vjs-sublime-skin .vjs-play-progress:before,
.vjs-sublime-skin .vjs-volume-level:before {
    content: ''; /* Remove Circle From Progress Bar */
}

.vjs-sublime-skin .vjs-mouse-display:after,
.vjs-sublime-skin .vjs-play-progress:after,
.vjs-sublime-skin .vjs-time-tooltip {
    width: 5.5em;
}

.vjs-sublime-skin .vjs-audio-button {
    display: none;
}

.vjs-sublime-skin .vjs-volume-bar {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);
    background-size: 22px 14px;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    max-width: 22px;
    max-height: 14px;
    margin: 7px 4px;
    border-radius: 0;
}

.vjs-sublime-skin .vjs-volume-level {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);
    background-size: 22px 14px;
    background-repeat: no-repeat;
    max-width: 22px;
    max-height: 14px;
    height: 100%;
}

/* New for VideoJS v6 */
.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
.vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
    width: 6em;
    transition-property: none;
}

.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
    width: 3em;
    height: auto;
}

.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
    transition-property: none;
}

.vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder {
    display: none; /* Remove Duplicate Fullscreen Icon */
}

.vjs-sublime-skin .vjs-volume-panel .vjs-mute-control {
    width: 2em;
    z-index: 1;
    padding: 0;
}

.vjs-sublime-skin .vjs-volume-panel .vjs-volume-control {
    display: inline-block;
    position: relative;
    left: 5px;
    opacity: 1;
    width: 3em;
    height: auto;
}