﻿@font-face { font-family:"Monsterrat"; src:url("/fonts/montserrat-700.woff2") format("woff2"); font-style:normal; font-weight:bold; -webkit-font-smoothing:antialiased; font-display:swap; }
@font-face { font-family:"Monsterrat"; src:url("/fonts/montserrat-italic.woff2") format("woff2"); font-style:italic; font-weight:normal; -webkit-font-smoothing:antialiased; font-display:swap; }
@font-face { font-family:"Monsterrat"; src:url("/fonts/montserrat-bold-italic.woff2") format("woff2"); font-style:italic; font-weight:bold; -webkit-font-smoothing:antialiased; font-display:swap; }
@font-face { font-family:"Monsterrat"; src:url("/fonts/montserrat-regular.woff2") format("woff2"); font-style:normal; font-weight:normal; -webkit-font-smoothing:antialiased; font-display:swap; }

html { font-size:100% !important; line-height:1 !important; }
body { background-color:#ffffff; }
.float { float:left; }
::-webkit-scrollbar { width: 4px; }

/* TEMPORARILY HIDDEN */
.navigation_search { visibility: hidden; }
.mobile-navigation_search { visibility:hidden; }
.header_loggedin, #profile { visibility: hidden; }

/* MAIN CONTAINER */
.wxContent { margin-left:auto; margin-right:auto; max-width:1250px; padding-left:48px; padding-right:48px; padding:0px; font-family:"Monsterrat", Helvetica, arial, sans-serif; }
.wxContent:after { clear:both; content: ""; display:block; }
.wxContent h1 { font-size:24px; font-weight:bold; margin:0px 0px 15px 5px; padding:1px 0px; border-left:4px solid; border-image:linear-gradient(#c90000, #a90000) 1; padding-left:12px; }
.wxContent h2 { margin:0px; padding:0px 0px 20px 0px; font-size:20px; }
.wxSpacer { padding-top:15px; }
.mcnBannerDesktop { width:100%; height:90px; }
.mcnBannerMobile { width:100%; height:58px; }

/* JQuery CSS */
.ui-menu .ui-menu-item { width:160px; border-radius:0px; font-size:14px; background-color:#fdfdfd; }
.ui-menu .ui-menu-item :hover { font-weight:bold; }

/* POSTCODE SEARCH */
.wxPostcode { margin:0px; padding:0px; }
.wxPostcode:after { clear:both; content:""; display:block; }
.wxPostcode span.wxError { display:block; position:absolute; right:0; padding:2px 3px 2px 3px; background-color:#f4f50d; border:1px solid #cccccc; font-size:11px !important; font-weight:bolder !important; color:#000000 !important; }
.wxPostcode .wxSuburb { float:left; margin-top:19px; }
.wxPostcode .wxSuburb span { font-size:14px; font-weight:bold; }
.wxPostcode .wxSearch { width:90px; float:right; white-space:nowrap; }
.wxPostcode .wxSearch span { font-size:10px; font-weight:bold; line-height:0; margin-top:10px; }
.wxPostcode .wxSearch input[type=text] { width:90px; height:22px; margin:0px; font-size:16px; font-weight:bolder; border:1px solid #000000; background:url("/img/icon_search.png") no-repeat right; background-size:15px 15px; }
.wxPostcode .wxSearch input[type=text]:focus { background-color:#f7f7f7; }
.wxPostcode .wxSearch input[type=text]:hover { background-color:#f7f7f7; }

/* RHS DATA WIDGET */
.wxDataWidget { margin-top:10px; }
.wxDataWidget input[type=checkbox] { display:none; }
.wxDataWidgetTab { font-size:18px; font-weight:bolder; display:block; margin:0px; padding:4px 15px; background:#e5e5e5; color:#000000; cursor:pointer; transition:all 0.25s ease-out; background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(235,235,235,8.0)); }
.wxDataWidgetTab:hover { color:#cd0300; }
.wxDataWidgetTab::before { content:"\203A"; display:inline-block; margin-right:10px; }
.wxDataWidgetContent .wxDataWidgetContentInner { border-top:1px solid #cd0300; background:linear-gradient(to top, rgba(255,255,255,0), rgba(248,248,248,8.0)); padding:10px; }
.wxDataWidgetContent { max-height:0px; overflow:hidden; transition:max-height .25s ease-in-out; margin-bottom:10px; }
.wxDataWidgetInput:checked + .wxDataWidgetTab { color:#cd0300; }
.wxDataWidgetInput:checked + .wxDataWidgetTab::before { content:"\203A"; transform:rotate(90deg); color:#cd0300; }
#wxDataWidgetInput_Now:checked + .wxDataWidgetTab + .wxDataWidgetContent,
#wxDataWidgetInput_Today:checked + .wxDataWidgetTab + .wxDataWidgetContent,
#wxDataWidgetInput_7days:checked + .wxDataWidgetTab + .wxDataWidgetContent,
#wxDataWidgetInput_Marine:checked + .wxDataWidgetTab + .wxDataWidgetContent,
#wxDataWidgetInput_Radar:checked + .wxDataWidgetTab + .wxDataWidgetContent,
#wxDataWidgetInput_Satellite:checked + .wxDataWidgetTab + .wxDataWidgetContent,
#wxDataWidgetInput_Warnings:checked + .wxDataWidgetTab + .wxDataWidgetContent,
#wxDataWidgetInput_Capitals:checked + .wxDataWidgetTab + .wxDataWidgetContent { max-height:302px; }

/* CURRENT OBS */
.wxObsLayoutGrid {
    display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr; grid-template-areas:"wxObsTemp wxObsWind wxObsHumidity";
    display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr; -ms-grid-rows:1fr; /* IE & Edge browsers */
}
.wxObsTemp { grid-area:wxObsTemp; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxObsWind { grid-area:wxObsWind; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; }
.wxObsHumidity { grid-area:wxObsHumidity; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; position:relative; }
.wxCurrentTemp { width:100px; margin:5px 0px; padding:0px; text-align:center; }
.wxCurrentTemp span { font-size:42px; color:#000000; }
.wxFeelsTemp { width:100px; margin:0px; padding:0px; text-align:center; }
.wxFeelsTemp span { font-size:12px; color:#000000; }
.wxWindHumidity { width:100px; margin:0px; padding:7px 0px; background-color:#e5e5e5; text-align:center; }
.wxWindHumidity span { font-size:12px; color:#000000;  }

/* "TODAY" FORECAST */
.wxTodayLayoutGrid {
    display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto auto; grid-template-areas:"wxTodayTemp wxTodaySun wxTodayRain" "wxTodayDescrip wxTodayDescrip wxTodayDescrip";
    display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr; -ms-grid-rows:auto auto; /* IE & Edge browsers */
}
.wxTodayTemp { grid-area:wxTodayTemp; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxTodaySun { grid-area:wxTodaySun; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; }
.wxTodayRain { grid-area:wxTodayRain; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; position:relative; }
.wxTodayDescrip { grid-area:wxTodayDescrip; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:3; position:relative; }
.wxTodayMinTemp { width:35px; margin:0px; padding:3px 0px; text-align:center; background-color:#313482; }
.wxTodayMinTemp span { font-size:20px; color:#ffffff; }
.wxTodayMaxTemp { width:35px; margin:0px; padding:3px 0px; text-align:center; background-color:#cd0300; }
.wxTodayMaxTemp span { font-size:20px; color:#ffffff; }
.wxTodayIcon { margin:0px; padding:0px; }
.wxTodaySun { margin:0px; padding:6px 0px; }
.wxTodayRain { width:115px; margin:0px; padding:6px 0px; }
.wxTodaySun span, .wxTodayRain span { font-size:12px; color:#000000; }
.wxTodaySun span b, .wxTodayRain span b { font-size:12px; color:#000000; }
.wxTodayDescrip { margin-top:10px; }
.wxTodayDescrip span { font-size:11px; color:#000000; }

/* "7-DAY" FORECAST */
.wxFcstLayoutGrid {
    display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows:1fr; grid-template-areas:"wxFcstDay1 wxFcstDay2 wxFcstDay3 wxFcstDay4 wxFcstDay5 wxFcstDay6 wxFcstDay7";
    display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr; -ms-grid-rows:1fr; /* IE & Edge browsers */
}
.wxFcstDay1 { grid-area:wxFcstDay1; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxFcstDay2 { grid-area:wxFcstDay2; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; }
.wxFcstDay3 { grid-area:wxFcstDay3; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; position:relative; }
.wxFcstDay4 { grid-area:wxFcstDay4; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; position:relative; }
.wxFcstDay5 { grid-area:wxFcstDay5; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:5; -ms-grid-col-span:1; position:relative; }
.wxFcstDay6 { grid-area:wxFcstDay6; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:6; -ms-grid-col-span:1; position:relative; }
.wxFcstDay7 { grid-area:wxFcstDay7; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:7; -ms-grid-col-span:1; position:relative; }
.wxFcstDayName { width:35px; margin:0px 0px 5px 0px; text-align:center; }
.wxFcstDayName span { font-size:12px; color:#000000; }
.wxFcstRainPct { width:35px; margin:0px; text-align:center; }
.wxFcstRainPct span { font-size:8px; font-weight:bold; color:#616161; }
.wxFcstRainMM { width:35px; height:20px; margin:2px 0px; text-align:center; background:linear-gradient(to bottom, rgba(235,235,235,8.0), rgba(255,255,255,0)); }
.wxFcstRainMM span { font-size:9px; font-weight:bold; color:#616161; }
.wxFcstIcon { margin:0px; padding:0px; }
.wxFcstMinTemp { width:35px; margin:0px; padding:3px 0px; text-align:center; background-color:#313482; }
.wxFcstMinTemp span { font-size:16px; color:#ffffff; }
.wxFcstMaxTemp { width:35px; margin:0px; padding:3px 0px; text-align:center; background-color:#cd0300; }
.wxFcstMaxTemp span { font-size:16px; color:#ffffff; }

/* MARINE */
.wxMarineLayoutGrid {
    display:grid; grid-template-columns:50% 50%; grid-template-rows:auto auto; grid-template-areas:"wxMarineTides wxMarineCoastal" "wxMarineDescrip wxMarineDescrip";
    display:-ms-grid; -ms-grid-columns:50% 50%; -ms-grid-rows:auto auto; /* IE & Edge browsers */
}
.wxMarineTides { grid-area:wxMarineTides; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxMarineCoastal { grid-area:wxMarineCoastal; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; }
.wxMarineDescrip { grid-area:wxMarineDescrip; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:2; position:relative; margin-top:10px; }
.wxMarineTidesLayoutGrid { 
    display:grid; grid-template-columns:27% 27% 46%; grid-template-rows:auto; grid-template-areas:"wxMarineTidesCol1 wxMarineTidesCol2 wxMarineTidesCol3";
    display:-ms-grid; -ms-grid-columns:27% 27% 46%; -ms-grid-rows:auto; /* IE & Edge browsers */
}
.wxMarineTidesCol1 { grid-area:wxMarineTidesCol1; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxMarineTidesCol2 { grid-area:wxMarineTidesCol2; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; }
.wxMarineTidesCol3 { grid-area:wxMarineTidesCol3; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxMarineCoastalLayoutGrid { 
    display:grid; grid-template-columns:44% 56%; grid-template-rows:auto; grid-template-areas:"wxMarineCoastalCol1 wxMarineCoastalCol2";
    display:-ms-grid; -ms-grid-columns:44% 56%; -ms-grid-rows:auto; /* IE & Edge browsers */
}
.wxMarineCoastalCol1 { grid-area:wxMarineCoastalCol1; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxMarineCoastalCol2 { grid-area:wxMarineCoastalCol2; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; }

.wxMarineTides span b { font-size:12px; color:#000000; }
.wxMarineCoastal span b { font-size:12px; color:#000000; }
.wxMarineTidesCol1 span, .wxMarineTidesCol2 span, .wxMarineTidesCol3 span, .wxMarineCoastalCol1 span, .wxMarineCoastalCol2 span { font-size:12px; color:#000000; }
.wxMarineTidesCol1 span b, .wxMarineTidesCol2 span b, .wxMarineTidesCol3 span b, .wxMarineCoastalCol1 span b, .wxMarineCoastalCol2 span b { font-size:12px; color:#000000; }
.wxMarineDescrip { margin-top:10px; }
.wxMarineDescrip span { font-size:11px; color:#000000; }

/* CAPITALS FORECAST */
.wxCapitalsLayoutGrid {
    display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows:1fr; grid-template-areas:"wxCapitalsDay1 wxCapitalsDay2 wxCapitalsDay3 wxCapitalsDay4 wxCapitalsDay5 wxCapitalsDay6 wxCapitalsDay7 wxCapitalsDay8";
    display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; -ms-grid-rows:1fr; /* IE & Edge browsers */
}
.wxCapitalsDay1 { grid-area:wxCapitalsDay1; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
.wxCapitalsDay2 { grid-area:wxCapitalsDay2; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; }
.wxCapitalsDay3 { grid-area:wxCapitalsDay3; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; position:relative; }
.wxCapitalsDay4 { grid-area:wxCapitalsDay4; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; position:relative; }
.wxCapitalsDay5 { grid-area:wxCapitalsDay5; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:5; -ms-grid-col-span:1; position:relative; }
.wxCapitalsDay6 { grid-area:wxCapitalsDay6; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:6; -ms-grid-col-span:1; position:relative; }
.wxCapitalsDay7 { grid-area:wxCapitalsDay7; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:7; -ms-grid-col-span:1; position:relative; }
.wxCapitalsDay8 { grid-area:wxCapitalsDay8; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:8; -ms-grid-col-span:1; position:relative; }
.wxCapitalsCityName { width:32px; margin:0px; padding-bottom:8px; text-align:center; }
.wxCapitalsCityName span { font-size:11px; font-weight:bolder; color:#000000; }
.wxCapitalsRainPct { width:32px; height:11px; margin:0px; text-align:center; }
.wxCapitalsRainPct span { font-size:8px; font-weight:bold; color:#616161; }
.wxCapitalsRainMM { width:32px; height:19px; margin:2px 0px; padding-top:5px; text-align:center; background-color:#f0f0f0; }
.wxCapitalsRainMM span { font-size:7px; font-weight:bolder; color:#616161;}
.wxCapitalsIcon { margin:0px; padding:5px 0px 5px 0px; }
.wxCapitalsMinTemp { width:32px; margin:0px; padding:3px 1px; text-align:center; background-color:#313482; }
.wxCapitalsMinTemp span { font-size:14px; color:#ffffff; }
.wxCapitalsMaxTemp { width:32px; margin:0px; padding:3px 1px; text-align:center; background-color:#cd0300; }
.wxCapitalsMaxTemp span { font-size:14px; color:#ffffff; }

/* WARNINGS */
.wxWarningsItems ul li { list-style:none; padding-bottom:4px; }
.wxWarningsItems ul li a { font-weight:normal; font-size:12px; }
.wxWarningsItems ul li a:hover { color:#505050; text-decoration:underline; }
.wxWarningsText { font-size:14px; }
.wxWarningsText p { white-space:pre-line !important; }

/* VIDEO */
.wxVodTitleWithLink { overflow:hidden; }
.wxVodTitleWithLink span { font-size:16px; margin-right:5px; padding-top:6px; float:right; }
.wxVodTitleWithLink a:hover { color:#cd0300; }
.wxVodTitleWithLink h1 { float:left; }

.wxVodPanel1 a { white-space:normal !important; color:#ffffff; }
.wxVodPanel1 .imgThumb { width:100%; height:100%; vertical-align:top; }
.wxVodPanel1 .imgTitle { width:100%; position:absolute; bottom:0px; left:0px; padding:7px; font-size:12px; font-weight:bold; text-shadow:1px 1px 3px #202020; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1.0)); }
.wxVodPanel1 .imgTitle:empty { display:none; }
.wxVodPanel1 .imgUpdated { position:absolute; top:0px; right:0px; padding:3px 4px 2px 4px; font-size:10px; font-weight:bold; background-color:#d5091e; }
.wxVodPanel1 .imgUpdated:empty { display:none; }
.wxVodPanel1_Tile1 { grid-area:Panel1_Tile1; position:relative; background-color:#000000; }
.wxVodPanel1_Tile2 { grid-area:Panel1_Tile2; position:relative; }
.wxVodPanel1_Tile3 { grid-area:Panel1_Tile3; position:relative; }
.wxVodPanel1_Tile4 { grid-area:Panel1_Tile4; position:relative; }
.wxVodPanel1_Tile5 { grid-area:Panel1_Tile5; position:relative; }
.wxVodPanel1_Tile6 { grid-area:Panel1_Tile6; position:relative; }
.wxVodPanel1_Tile7 { grid-area:Panel1_Tile7; position:relative; }
.wxVodPanel1_Tile8 { grid-area:Panel1_Tile8; position:relative; }
.wxVodPanel1_Tile9 { grid-area:Panel1_Tile9; position:relative; }
.wxVodPanel1_Tile10 { grid-area:Panel1_Tile10; position:relative; }
.wxVodPanel1_Tile11 { grid-area:Panel1_Tile11; position:relative; }
.wxVodPanel1_Tile12 { grid-area:Panel1_Tile12; position:relative; }
.wxVodPanel1_Tile13 { grid-area:Panel1_Tile13; position:relative; }

.wxVodPanel2 a { white-space:normal !important; color:#ffffff; }
.wxVodPanel2 .imgThumb { width:100%; height:100%; vertical-align:top; }
.wxVodPanel2 .imgTitle { width:100%; position:absolute; bottom:0px; left:0px; padding:7px; font-size:12px; font-weight:bold; text-shadow:1px 1px 3px #202020; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1.0)); }
.wxVodPanel2 .imgTitle:empty { display:none; }
.wxVodPanel2 .imgUpdated { position:absolute; top:0px; right:0px; padding:3px 4px 2px 4px; font-size:10px; font-weight:bold; background-color:#d5091e; }
.wxVodPanel2 .imgUpdated:empty { display:none; }
.wxVodPanel2_Tile1 { grid-area:Panel2_Tile1; position:relative; }
.wxVodPanel2_Tile2 { grid-area:Panel2_Tile2; position:relative; }
.wxVodPanel2_Tile3 { grid-area:Panel2_Tile3; position:relative; }
.wxVodPanel2_Tile4 { grid-area:Panel2_Tile4; position:relative; }
.wxVodPanel2_Tile5 { grid-area:Panel2_Tile5; position:relative; }
.wxVodPanel2_Tile6 { grid-area:Panel2_Tile6; position:relative; }
.wxVodPanel2_Tile7 { grid-area:Panel2_Tile7; position:relative; }
.wxVodPanel2_Tile8 { grid-area:Panel2_Tile8; position:relative; }
.wxVodPanel2_Tile9 { grid-area:Panel2_Tile9; position:relative; }
.wxVodPanel2_Tile10 { grid-area:Panel2_Tile10; position:relative; }
.wxVodPanel2_Tile11 { grid-area:Panel2_Tile11; position:relative; }
.wxVodPanel2_Tile12 { grid-area:Panel2_Tile12; position:relative; }
.wxVodPanel2_Tile13 { grid-area:Panel2_Tile13; position:relative; }
.wxVodPanel2_Tile14 { grid-area:Panel2_Tile14; position:relative; }
.wxVodPanel2_Tile15 { grid-area:Panel2_Tile15; position:relative; }
.wxVodPanel2_Tile16 { grid-area:Panel2_Tile16; position:relative; }

@media all and (-ms-high-contrast:none) and (min-width:1025px) { 
  /* col-span CSS hack for video tiles on IE */
  .wxVodPanel1_Tile1 { width:196%; background-color:#000000; }
}
@media only screen and (min-width:1025px) {
  @supports (-ms-accelerator:true) {
  /* col-span CSS hack for video tiles on Edge */
  .wxVodPanel1_Tile1 { width:196%; background-color:#000000; } 
  }
}

/* MODAL WARNING WINDOW */
#wxWarningBackground { z-index:998; display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000000; -moz-opacity:0.7; opacity:.70; filter:alpha(opacity=80); }
#wxWarningForeground { z-index:999; display:none; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background-color:#000000; border:2px solid #616161; overflow:visible; }
#wxWarningContainer { margin:0px; padding:0px; }
#wxWarningClose { z-index:5; display:inline-block; position:absolute; top:15px; right:15px; float:right; cursor:pointer; background-color:#222222; color:#ffffff; border:1px solid #afafaf; border-radius:5px; font-size:34px; font-weight:bold; line-height:0; padding:15px 10px 20px 10px; opacity:0.6; }
.wxWarningClose:before { content: "x"; }
#wxWarningBackground:hover ~ #wxWarningClose{ display:none; }

/* MODAL VIDEO WINDOW */
#wxVideoBackground { z-index:998; display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000000; -moz-opacity:0.7; opacity:.70; filter:alpha(opacity=80); }
#wxVideoForeground { z-index:999; display:none; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background-color:#000000; border:2px solid #616161; overflow:visible; }
#wxVideoContainer { margin:0px; padding:0px; }
#wxVideoClose { z-index:5; display:inline-block; position:absolute; top:15px; right:15px; float:right; cursor:pointer; background-color:#222222; color:#ffffff; border:1px solid #afafaf; border-radius:5px; font-size:34px; font-weight:bold; line-height:0; padding:15px 10px 20px 10px; opacity:0.6; }
.wxVideoClose:before { content: "x"; }
#wxVideoBackground:hover ~ #wxVideoClose{ display:none; }

/* VIDEO PLAYER */
.vjs-next-overlay { min-width:250px; }
.vjs-next-overlay img { display:none; }
.vjs-next-overlay-banner { background-color:#000000; border:1px solid #afafaf; border-radius:5px; -moz-opacity:0.6; opacity:.60; }
.vjs-next-overlay-countdown { color:#ffffff; }
.vjs-next-overlay-name { color:#ffffff; font-weight:bold; }
.vjs-dock-shelf .vjs-button.vjs-share-control{ position:relative; margin:40px 0px; padding:5px; opacity:0.7; }
.vjs-dock-shelf .vjs-button.vjs-share-control:before{ position:relative; vertical-align:bottom; }

/* ------------------ MOBILE DEVICES ------------------ */
@media only screen and (max-width: 767px) 
{
    input, textarea { font-size:initial; }
    .wxContent { margin:8px; padding:5px 0 0; }
    .wxLayoutGrid {
        display:grid; grid-template-columns:100% 100%; grid-template-rows:1fr; grid-template-areas:"wxLayoutGridLeft" "wxLayoutGridRight";
        display:-ms-grid; -ms-grid-columns:100% 100%; -ms-grid-rows:1fr; /* IE & Edge browsers */
    }
    .wxLayoutGridLeft { grid-area:wxLayoutGridLeft; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
    .wxLayoutGridRight { grid-area:wxLayoutGridRight; -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; margin:4px 3px; }
    .wxPostcode .wxSearch span { font-size:8px; }
    .wxCurrentTemp { margin:8px 0px; }
    .wxFcstRainPct { white-space:nowrap; }
    .wxFcstRainPct span { font-size:8px; }
    .wxFcstRainMM { padding-top:3px; }
    .wxCapitalsRainPct { white-space:nowrap; }
    .wxCapitalsRainPct span { font-size:8px; }
    .wxCapitalsRainMM { padding-top:3px; }

    .wxVodPanel1 .imgTitle { font-size:12px; }
    .wxVodPanel1 {
        margin-bottom:25px;
        display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas:"Panel1_Tile1 Panel1_Tile1" "Panel1_Tile1 Panel1_Tile1" "Panel1_Tile2 Panel1_Tile3" "Panel1_Tile4 Panel1_Tile5" "Panel1_Tile6 Panel1_Tile7" "Panel1_Tile8 Panel1_Tile9" "Panel1_Tile10 Panel1_Tile11" "Panel1_Tile12 Panel1_Tile13";
        display:-ms-grid; -ms-grid-columns:1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr 1fr 1fr; } /* One less row for IE & Edge on Mobile */ 
    .wxVodPanel1_Tile1 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile2 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile3 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile4 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile5 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile6 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile7 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile8 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile9 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile10 { -ms-grid-row:6; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile11 { -ms-grid-row:6; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile12 { -ms-grid-row:7; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile13 { -ms-grid-row:7; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }

    .wxVodPanel2 {
        margin-bottom:25px;
        display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr; grid-template-areas:"Panel2_Tile1 Panel2_Tile2" "Panel2_Tile3 Panel2_Tile4" "Panel2_Tile5 Panel2_Tile6"  "Panel2_Tile7 Panel2_Tile8"  "Panel2_Tile9 Panel2_Tile10";
        display:-ms-grid; -ms-grid-columns:1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr 1fr; } /* One less row for IE & Edge on Mobile */ 
    .wxVodPanel2_Tile1 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile2 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile3 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile4 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile5 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile6 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile7 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile8 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile9 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile10 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile11, .wxVodPanel2_Tile12, .wxVodPanel2_Tile13, .wxVodPanel2_Tile14, .wxVodPanel2_Tile15, .wxVodPanel2_Tile16 { display:none; }

    .wxVodPanelsAll { margin:3px; }
    #wxWarningForeground { width:98%; height:auto; margin-top:6px; }
    #wxVideoForeground { width:100%; height:39%; }
}

/* ---------- TABLETS (PORTRAIT + LANDSCAPE) ---------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) 
{
    .wxContent { margin:10px; }
    .wxLayoutGrid {
        display:grid; grid-template-columns:1fr 350px; grid-template-rows:1fr; grid-template-areas:"wxLayoutGridLeft wxLayoutGridRight";
        display:-ms-grid; -ms-grid-columns:1fr 350px; -ms-grid-rows:1fr; /* IE & Edge browsers */
    }
    .wxLayoutGridLeft { grid-area:wxLayoutGridLeft; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
    .wxLayoutGridRight { grid-area:wxLayoutGridRight; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; margin-left:6px; }
    .wxPostcode .wxSearch span { font-size:8px; font-weight:bolder; }
    .wxVodPanelsAll { margin:5px; }
    #wxWarningForeground { width:700px; height:90%; }
    #wxVideoForeground { width:752px; height:423px; }
}

/* ---------------- TABLETS (PORTRAIT) ---------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) 
{
    .wxVodPanel1 {
        display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas:"Panel1_Tile1 Panel1_Tile1" "Panel1_Tile1 Panel1_Tile1" "Panel1_Tile2 Panel1_Tile3" "Panel1_Tile4 Panel1_Tile5" "Panel1_Tile6 Panel1_Tile7" "Panel1_Tile8 Panel1_Tile9" "Panel1_Tile10 Panel1_Tile11" "Panel1_Tile12 Panel1_Tile13";
        display:-ms-grid; -ms-grid-columns:1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr 1fr 1fr; /* One less row for IE & Edge on Mobile */ 
    } 
    .wxVodPanel1_Tile1 { -ms-grid-row:1; -ms-grid-row-span:2; -ms-grid-column:1; -ms-grid-col-span:2; }
    .wxVodPanel1_Tile2 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile3 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile4 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile5 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile6 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile7 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile8 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile9 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile10 { -ms-grid-row:6; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile11 { -ms-grid-row:6; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile12 { -ms-grid-row:7; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile13 { -ms-grid-row:7; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }

    .wxVodPanel2 {
        display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr; grid-template-areas:"Panel2_Tile1 Panel2_Tile2" "Panel2_Tile3 Panel2_Tile4" "Panel2_Tile5 Panel2_Tile6" "Panel2_Tile7 Panel2_Tile8" "Panel2_Tile9 Panel2_Tile10";
        display:-ms-grid; -ms-grid-columns:1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr 1fr; /* IE & Edge browsers */
    }
    .wxVodPanel2_Tile1 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile2 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile3 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile4 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile5 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile6 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile7 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile8 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile9 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile10 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile11, .wxVodPanel2_Tile12, .wxVodPanel2_Tile13, .wxVodPanel2_Tile14, .wxVodPanel2_Tile15, .wxVodPanel2_Tile16 { display:none; }
}

/* ---------------- TABLETS (LANDSCAPE) ---------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) 
{
    .wxVodPanel1 {
        display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; grid-template-areas:"Panel1_Tile1 Panel1_Tile2 Panel1_Tile3" "Panel1_Tile4 Panel1_Tile5 Panel1_Tile6" "Panel1_Tile7 Panel1_Tile8 Panel1_Tile9" "Panel1_Tile10 Panel1_Tile11 Panel1_Tile12";
        display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr; /* IE & Edge browsers */
    }
    .wxVodPanel1_Tile1 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile2 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile3 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile4 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile5 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile6 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile7 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile8 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile9 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile10 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile11 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile12 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile13 { display:none; }

    .wxVodPanel2 {
        display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr; grid-template-areas:"Panel2_Tile1 Panel2_Tile2 Panel2_Tile3" "Panel2_Tile4 Panel2_Tile5 Panel2_Tile6" "Panel2_Tile7 Panel2_Tile8 Panel2_Tile9" "Panel2_Tile10 Panel2_Tile11 Panel2_Tile12" "Panel2_Tile13 Panel2_Tile14 Panel2_Tile15";
        display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr 1fr; /* IE & Edge browsers */
    }
    .wxVodPanel2_Tile1 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile2 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile3 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile4 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile5 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile6 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile7 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile8 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile9 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile10 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile11 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile12 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile13 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile14 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile15 { -ms-grid-row:5; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile16 { display:none; }
}

/* ---------------------- DESKTOP ---------------------- */
@media only screen and (min-width: 1025px) 
{
    .wxLayoutGrid {
        display:grid; grid-template-columns:1fr 350px; grid-template-rows:1fr; grid-template-areas:"wxLayoutGridLeft wxLayoutGridRight";
        display:-ms-grid; -ms-grid-columns:1fr 350px; -ms-grid-rows:1fr; /* IE & Edge browsers */
    }
    .wxLayoutGridLeft { grid-area:wxLayoutGridLeft; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; position:relative; }
    .wxLayoutGridRight { grid-area:wxLayoutGridRight; -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; position:relative; margin-left:6px; }

    .wxVodPanel1 {
        display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; grid-template-areas:"Panel1_Tile1 Panel1_Tile1 Panel1_Tile2 Panel1_Tile3" "Panel1_Tile1 Panel1_Tile1 Panel1_Tile4 Panel1_Tile5" "Panel1_Tile6 Panel1_Tile7 Panel1_Tile8 Panel1_Tile9" "Panel1_Tile10 Panel1_Tile11 Panel1_Tile12 Panel1_Tile13";
        display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr; /* IE & Edge browsers */
    }
    .wxVodPanel1_Tile1 { -ms-grid-row:1; -ms-grid-row-span:2; -ms-grid-column:1; -ms-grid-col-span:2; }
    .wxVodPanel1_Tile2 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile3 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile4 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile5 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile6 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile7 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile8 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile9 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile10 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile11 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile12 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel1_Tile13 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }

    .wxVodPanel2 {
        display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; grid-template-areas:"Panel2_Tile1 Panel2_Tile2 Panel2_Tile3 Panel2_Tile4" "Panel2_Tile5 Panel2_Tile6 Panel2_Tile7 Panel2_Tile8" "Panel2_Tile9 Panel2_Tile10 Panel2_Tile11 Panel2_Tile12" "Panel2_Tile13 Panel2_Tile14 Panel2_Tile15 Panel2_Tile16";
        display:-ms-grid; -ms-grid-columns:1fr 1fr 1fr 1fr; -ms-grid-rows:1fr 1fr 1fr 1fr; /* IE & Edge browsers */
    }
    .wxVodPanel2_Tile1 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile2 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile3 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile4 { -ms-grid-row:1; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile5 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile6 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile7 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile8 { -ms-grid-row:2; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile9 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile10 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile11 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile12 { -ms-grid-row:3; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile13 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:1; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile14 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:2; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile15 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:3; -ms-grid-col-span:1; }
    .wxVodPanel2_Tile16 { -ms-grid-row:4; -ms-grid-row-span:1; -ms-grid-column:4; -ms-grid-col-span:1; }

    .wxVodPanelsAll { margin:5px; -webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; }
    .wxVodPanelsAll:hover { -webkit-transform:scale(1.03); -ms-transform:scale(1.03); transform:scale(1.03); }
    #wxWarningForeground { width:700px; height:80%; }
    #wxVideoForeground { width:1024px; height:576px; }
}