@font-face { font-family: Interstate; src: url(/fonts/newfonts/Interstate-Bold3.woff) format("woff"); font-weight: 700; } @font-face { font-family: Interstate; src: url(/fonts/newfonts/Interstate-Bold5.woff) format("woff"); font-weight: 800; } @font-face { font-family: 'Interstate Mono'; src: url(/fonts/newfonts/InterstateMono.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: 'Interstate BoldCn'; src: url(/fonts/newfonts/Interstate-BoldCondensed.woff) format("woff"); font-weight: 700; font-style: normal; font-stretch: condensed; } @font-face { font-family: 'Interstate Cn'; src: url(/fonts/newfonts/Interstate-RegularCondensed.woff) format("woff"); font-weight: 400; font-style: normal; font-stretch: condensed; } @font-face { font-family: Interstate; src: url(/fonts/newfonts/Interstate-Regular.woff) format("woff"); font-weight: 400 500; font-style: normal } @font-face { font-family: 'Interstate2'; src: url(/fonts/newfonts/Interstate-Regular.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: 'Zemestro Std'; src: url(/fonts/ZemestroStd.woff2) format("woff2"), url(/fonts/ZemestroStd.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: 'PressureArrow'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/encodesansexpanded/v8/c4m_1mF4GcnstG_Jh1QH6ac4hNLeNyeYUpolKQZidIAa.woff2) format('woff'); unicode-range: U+2191,U+2193; } @font-face { font-family: Frutiger; src: url(/fonts/newfonts/Frutiger.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: Frutiger; src: url(/fonts/newfonts/Frutiger_Bold.woff) format("woff"); font-weight: bold; font-style: normal } @font-face { font-family: 'Frutiger LT'; src: url(/fonts/newfonts/FrutigerLT-66BdIt.woff) format("woff"); font-style: italic; } @font-face { font-family: 'Frutiger 57 Condensed'; src: url(/fonts/newfonts/Frutiger-57Cn.woff) format("woff"); font-style: normal; } @font-face { font-family: 'Frutiger Bold Cn'; src: url(/fonts/newfonts/FrutigerBoldCn.woff) format("woff"); font-style: normal; } @font-face { font-family: 'Frutiger BQ'; src: url(/fonts/newfonts/FrutigerCondensedBQ-Black.woff) format("woff"); font-style: normal; } .mapboxgl-ctrl-attrib { display:none; } .maplibregl-canvas { filter: drop-shadow(3px 3px 0px rgba(23, 23, 23, 1)); } .mapboxgl-ctrl-logo { display:none !important; } .info-slide .nodata { transform: translate(0, 60px) scale(115.25%,100%); transform-origin: left; position: absolute; white-space: nowrap; font-family: 'Frutiger 57 Condensed'; padding: 22.9%; padding-left: 20.4%; color: #fff; font-size: 48px; text-shadow: #000 2px 2px 4px; z-index: 2000 } .info-slide .tempunavailable { transform: translate(0, 60px) scale(114.5%,100%); transform-origin: left; position: absolute; white-space: nowrap; font-family: 'Frutiger 57 Condensed'; padding-top: 23.5%; padding-left: 15%; color: #fff; font-size: 49px; text-shadow: #000 2px 2px 4px; z-index: 2000 } .radar-slide .tempunavailable { transform: translate(0, 0); } .info-slide .noreport { transform: translate(0, 60px) scale(114.5%,100%); transform-origin: left; position: absolute; white-space: nowrap; font-family: 'Frutiger 57 Condensed'; padding-top: 23.5%; padding-left: 29.65%; color: #fff; font-size: 48px; text-shadow: #000 2px 2px 4px; z-index: 2000 } .info-slide-content.severe-weatherstatement .frost-pane { background-color: rgba(0, 0, 0, 0); background: url(/images/newbg/sev_wx_statement.png); background-repeat: no-repeat; background-position: -65px 0px; background-size: 1007px 511px; max-height: 100%; transform: translate(0,0px); } .info-slide-content.severe-weatherstatement .frost-pane .statement { font-family: 'Frutiger 57 Condensed'; font-size: 43px; color: #fff; text-shadow: #000 2px 2px 4px; line-height: 170%; text-align: center; width: 95%; padding-left: 9%; padding-right: 8%; padding-top: 79px; transform: scale(104%,100%); } .severe-city-info .frost-pane:first-of-type { min-width: 55.5%; margin-right: .8%; background-position: -72px -329px; } .severe-city-info .frost-pane.left * { position: absolute; min-width: 55.5%; padding-top: 5px; line-height: 182.5% } .severe-frost-pane .labels { font-family: 'Frutiger 57 Condensed'; color: #d8c422; left: 13.5%; transform: scale(115.5%,100%); transform-origin: left; font-size: 37.5px; } .severe-city-info .frost-pane .data { font-family: 'Frutiger 57 Condensed'; transform: scale(113.5%,100%); transform-origin: right; right: 10%; font-size: 37.5px; text-align: right; } .severe-city-info .frost-pane.right { background-position: -570px -329px; display: flex; flex-direction: column; align-items: center; padding-top: 30px } .severe-city-info .frost-pane .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; width: 212px; height: 212px; position: absolute; transform: translate(0, -47.5px); } .severe-city-info .frost-pane .conditions { display:flex; align-items: center; justify-content: center; position: absolute; font-size: 36px; font-weight: 500; line-height: 110%; top: 220px; text-align: center; text-transform: capitalize; overflow-wrap: break-word; width: 25%; height: 50px; transform: translate(-11px,0px) scale(104.5%,100%); transform-origin: left; } .severe-city-info .frost-pane .temp { font-family: 'Frutiger Bold Cn'; font-size: 69px; font-weight: 700; position: absolute; top: 323px; letter-spacing: 2.5px; transform: translate(-6px,0px) scale(102.5%,100%);; transform-origin: left; } .info-slide-content.severe-daypart { flex-direction: row } .info-slide-content.severe-daypart .frost-pane { max-height: 411.25px; padding-left: 62.5px; display: flex; background-position: -72px -364px; flex-direction: row; transform: translate(0px, 45px); } .info-slide-content.severe-daypart .hour { width: 140px; align-items: center; margin-right: 58px; } .info-slide-content.severe-daypart .hour.i .thing { height: 35px; width: 240px; padding-left: 40px; transform: translate(-40px, -35px); } .info-slide-content.severe-daypart .hour.i .thingbg { position: absolute; right: 0px; height: 35px; width: 100%; background: #3e3d3e; -webkit-mask-image: url(/images/newbg/severefrostpane.svg); -webkit-mask-position: -94.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.severe-daypart .hour.ii .thing { height: 35px; width: 198px; transform: translate(0px, -35px); } .info-slide-content.severe-daypart .hour.ii .thingbg { position: absolute; height: 35px; width: 100%; background: #3e3d3e; -webkit-mask-image: url(/images/newbg/severefrostpane.svg); -webkit-mask-position: -334.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.severe-daypart .hour.iii .thing { height: 35px; width: 198px; transform: translate(0px, -35px); } .info-slide-content.severe-daypart .hour.iii .thingbg { position: absolute; height: 35px; width: 100%; background: #3e3d3e; -webkit-mask-image: url(/images/newbg/severefrostpane.svg); -webkit-mask-position: -532.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.severe-daypart .hour.iv .thing { height: 35px; width: 240px; transform: translate(0px, -35px); } .info-slide-content.severe-daypart .hour.iv .thingbg { position: absolute; height: 35px; width: 100%; background: #3e3d3e; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -730.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.severe-daypart .hour .thing .thingtext { color: #fff; font-family: Frutiger; font-size: 31px; width: 140px; height: 100%; text-shadow: #000 0px 0px 0px; transform: translate(0px, 1px) scale(106%, 100%); display: flex; align-items: center; justify-content: center; } .info-slide-content.severe-daypart .tempbar { position: absolute; width: 140px; height: 0; background-color: #fefd5d; background: linear-gradient(to top, #fffe21 0, #db5a14 100%); bottom: 20px } .info-slide-content.severe-daypart .icon { width: 115px; height: 115px; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; position: absolute; top: 0px; margin-left: 12.5px; } .info-slide-content.severe-daypart .condition { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 27px; text-shadow: #000 2px 2px 2px; height: 30px; width: 105%; text-align: center; transform: translate(-4px, 90px) scale(117%, 100%); padding: 10px, 0px; overflow-wrap: break-word; } .info-slide-content.severe-daypart .tempbar .temp { color: #fff; font-family: Frutiger; font-size: 60px; text-shadow: #000 2px 2px 2px; height: 30px; width: 100%; text-align: center; transform: translate(0px, 15px) scale(102.5%, 100%); transform-origin: center; opacity: 0; } .info-slide-content.severe-daypart .tempbar .wind { color: #24346f; position: absolute; font-family: Frutiger; font-size: 32px; text-shadow: #000 0px 0px 0px; height: 30px; width: 100%; text-align: center; bottom: 2.5px; opacity: 0; transform: scale(105%, 100%); } .severe-forecast .frost-pane { padding: 1% 18% 1% 7%; height: 446.25px; } .severe-forecast .frost-pane .title { font-family: 'Frutiger 57 Condensed'; font-size: 41.5px; transform: scale(117%,100%); transform-origin: left; letter-spacing: .5px; } .info-slide-content.severe-forecast .frost-pane { max-height: 446.25px; background-position: -72px -329px; } .info-slide-content.severe-forecast .content { font-family: 'Frutiger 57 Condensed'; height: 400px; max-height: 400px; transform: translate(-2.5px,-2.5px) scale(115%,100%); transform-origin: left; letter-spacing: 1.5px; } .info-slide-content.severe-extended-forecast { width: 100%; } .info-slide-content.severe-extended-forecast .frost-pane { transform: translate(0px, 45px); max-height: 411.25px; min-width: 165px } .info-slide-content.severe-extended-forecast .frost-pane.iw { background-position: -72px -364px; } .info-slide-content.severe-extended-forecast .frost-pane.iiw { background-position: -243.5px -364px; } .info-slide-content.severe-extended-forecast .frost-pane.iiiw { background-position: -415px -364px; transform: translate(0px, 45px); min-width: 164px; max-width: 164px } .info-slide-content.severe-extended-forecast .frost-pane.ivw { background-position: -586.5px -364px; 757 transform: translate(0px, 45px); min-width: 164px; max-width: 164px } .info-slide-content.severe-extended-forecast .lfrost-pane { transform: translate(0px, 45px); max-height: 411.25px } .info-slide-content.severe-extended-forecast .frost-pane .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 115px; width: 115px; margin-left: 25px; transform: translate(0px, 10px); } .info-slide-content.severe-extended-forecast .lfrost-pane .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 115px; width: 115px; margin-left: 25px; transform: translate(0px, 10px); } .info-slide-content.severe-extended-forecast .thingg { color: #fff; font-family: Frutiger; font-size: 30px; text-shadow: #000 2px 2px 4px; height: 35px; width: 100%; position: absolute; display: flex; top: 70px; z-index: 388688; text-align: center; } .info-slide-content.severe-extended-forecast .thingbg { position: absolute; height: 35px; width: 100%; background: #3e3d3e; -webkit-mask-image: url(/images/newbg/severefrostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.severe-extended-forecast .thingg .thingday { color: #fff; font-family: 'Frutiger 57 condensed'; font-size: 30px; text-shadow: #000 2px 2px 4px; height: 35px; min-width: 165px; margin-left: 6.5px; padding-top: 3.5px; z-index: 388690; text-align: center; justify-content: center; transform: scale(115%,100%); } .info-slide-content.severe-extended-forecast .thingg .thingday.iw { margin-left: 0px; padding-left: 5px; } .info-slide-content.severe-extended-forecast .thingg .thingday.iiiw { min-width: 164px; }.info-slide-content.severe-extended-forecast .thingg .thingday.ivw { min-width: 164px; margin-left: 7.5px; } .info-slide-content.severe-extended-forecast .frost-pane .temphigh { color: #fff; font-family: Frutiger; font-weight: 400; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 70px; width: 100%; background: #5a8aec; box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; transform: translate(0px, 13.5px); } .info-slide-content.extended-forecast .frost-pane .temphigh span{ display: block; transform: scale(104.5%,100%); } .info-slide-content.severe-extended-forecast .frost-pane.iw .temphigh { background: linear-gradient(to right, rgba(105, 105, 105, 1) 0, rgba(105, 105, 105, 0.89715) 100%); } .info-slide-content.severe-extended-forecast .frost-pane.iiw .temphigh { background: linear-gradient(to right, rgba(105, 105, 105, 0.8933) 0, rgba(105, 105, 105, 0.79045) 100%); } .info-slide-content.severe-extended-forecast .frost-pane.iiiw .temphigh { background: linear-gradient(to right, rgba(105, 105, 105, 0.8933) 0, rgba(105, 105, 105, 0.79045) 100%); } .info-slide-content.severe-extended-forecast .frost-pane.ivw .temphigh { background:linear-gradient(to right, rgba(105, 105, 105, 0.6799) 0, rgba(105, 105, 105, 0.57815) 100%); } .info-slide-content.severe-extended-forecast .lfrost-pane .temphigh { height: 70px; width: 100%; background: linear-gradient(to right, rgba(105, 105, 105, 0.5732) 0, rgba(105, 105, 105, 0.45) 100%); box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .35); transform: translate(0px, 13.5px); } .info-slide-content.severe-extended-forecast .lfrost-pane .temphigh .temphightext { color: #fff; font-family: Frutiger; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 100%; width: 83.55%; display: flex; align-items: center; justify-content: center; transform: scale(104.5%,100%); } .info-slide-content.severe-extended-forecast .frost-pane .templow { color: #fff; font-family: Frutiger; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 75px; width: 83.55%; display: flex; align-items: center; justify-content: center; text-align: center; transform: translate(0px, 23.5px) scale(104.5%,100%); } .info-slide-content.severe-extended-forecast .lfrost-pane .templow { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 113px; line-height: 132.5%; width: 100%; padding: 20px; padding-top: 7px; text-align: center; transform: translate(-2px, 12.5px) scale(115.5%,100%); overflow-wrap: break-word; } .info-slide-content.severe-extended-forecast .frost-pane .conditions { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 27px; text-shadow: #000 2px 2px 2px; height: 113px; line-height: 125%; width: 100%; padding: 10px; text-align: center; transform: translate(-2px, 12.5px) scale(115.5%,100%); overflow-wrap: break-word; } .info-slide-content.severe-extended-forecast .lfrost-pane .conditions { color: #fff; font-family: Frutiger; font-size: 27px; line-height: 125%; text-shadow: #000 2px 2px 2px; height: 113px; width: 83.55%; padding: 20px; padding-top: 7px; text-align: center; transform: translate(0px, 12.5px); overflow-wrap: break-word; } .info-slide-content.severe-extended-forecast .linebreak { transform: translate(0px, 10px); height: 453.75px; width: 6.5px } .info-slide-content.severe-extended-forecast .linebreak.iii { height: 453.75px; width: 7.5px } .info-slide-content.severe-extended-forecast .lfrost-pane.vw { min-height: 100%; background: url(/images/newbg/severefrostpane.svg); background-repeat: no-repeat; background-size: 1065px 1164px; background-position: -757px -364px; z-index: 388686; flex: 1.4 } .info-slide-content.severe-almanac { display: flex; flex-direction: column; } .info-slide-content.severe-almanac .frost-pane.half { max-height: 204.725px; transform: translate(0,45px); background-position: -72px -364px; } .info-slide-content.severe-almanac .frost-pane.half .averagetitle { font-family: Frutiger; color: #d8c422; font-size: 35px; padding-left: 50px; padding-top: 25px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .ahigh { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 132.5px; top: 87.5px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .ahightext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 266px; top: 74px; transform: scale(102.5%,100%); } .info-slide-content.severe-almanac .frost-pane.half .alow { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 132.5px; top: 148.5px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .alowtext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 266px; top: 137.5px; transform: scale(102.5%,100%); } .info-slide-content.severe-almanac .frost-pane.half .recordtitle { font-family: Frutiger; position: absolute; color: #d8c422; font-size: 35px; left: 398px; top: 25px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .rhigh { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 457.5px; top: 87.5px; transform: scale(106%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .rhightext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 567.5px; top: 74px; transform: scale(102.5%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .rhighyear { position: absolute; font-family: Frutiger; color: #fff; font-size: 36px; left: 663px; top: 84px; } .info-slide-content.severe-almanac .frost-pane.half .rlow { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 457.5px; top: 148.5px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .rlowtext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 567.5px; top: 147.5px; transform: scale(102.5%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.half .rlowyear { position: absolute; font-family: Frutiger; color: #fff; font-size: 37.5px; left: 667.5px; top: 147.5px; } .info-slide-content.severe-almanac .thing { position: absolute; top: 70px; height: 35px; width: 100%; transform-origin: left; padding-top: 5px; padding-left: 65px; } .info-slide-content.severe-almanac .thing .thingtext { width: 100%; padding-left: 2.5px; color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: #000 2px 2px 4px; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.severe-almanac .thing .thingbg { position: absolute; right: 0; top: 0; background: #3e3d3e; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/severefrostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.severe-almanac .frost-pane.purple { transform: translate(0,45px); max-height: 203.725px; background-color: rgb(62, 61, 62); background: linear-gradient(to right, rgb(62, 61, 62, 0) 0, rgb(62, 61, 62, .75) 100%) } .info-slide-content.severe-almanac .frost-pane.purple .sunrisetitle { font-family: Frutiger; color: #d8c422; position: absolute; font-size: 36px; left: 20px; top: 55.5px; transform: scale(106.5%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.purple .sunrisetext { font-family: Frutiger; color: #fff; position: absolute; font-size: 38px; left: 167px; top: 54px; transform: scale(105.5%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.purple .sunsettitle { font-family: Frutiger; color: #d8c422; position: absolute; font-size: 36px; left: 20px; top: 125.5px; transform: scale(106.5%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.purple .sunsettext { font-family: Frutiger; color: #fff; position: absolute; font-size: 38px; left: 167px; top: 124px; transform: scale(105.5%,100%); transform-origin: left; } .info-slide-content.severe-almanac .frost-pane.purple .phase { display: flex; flex-direction: column; width: 100px; padding-right: 0px; height: 100%; top: 0; position: absolute; } .info-slide-content.severe-almanac .frost-pane.purple .phase.iv{ right: 43.5px; } .info-slide-content.severe-almanac .frost-pane.purple .phase.iii{ right: 169px; } .info-slide-content.severe-almanac .frost-pane.purple .phase.ii{ right: 294.5px; } .info-slide-content.severe-almanac .frost-pane.purple .phase.i{ right: 421px; } .info-slide-content.severe-almanac .frost-pane.purple .phase .phasetext { font-family: Frutiger; color: #d8c422; font-size: 23px; padding-top: 20.5px; align-self: center; transform: translate(-4.5px, 0px) scale(108%,100%); } .info-slide-content.severe-almanac .frost-pane.purple .phase .icon { background-repeat: no-repeat; background-size: contain; background-position: center center; width: 126px; min-height: 126px; position: absolute; top: 33px; align-self: center; -webkit-filter: drop-shadow(0 0 8px rgba(0, 0, 0, .95)); filter: drop-shadow(0 0 8px rgba(0, 0, 0, .95)); } .info-slide-content.severe-almanac .frost-pane.purple .phase.i .icon{ background-image: url(/images/moonphases/new.png); } .info-slide-content.severe-almanac .frost-pane.purple .phase.ii .icon{ background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url(/images/moonphases/half1.png); } .info-slide-content.severe-almanac .frost-pane.purple .phase.iii .icon{ background-image: url(/images/moonphases/full.png); } .info-slide-content.severe-almanac .frost-pane.purple .phase.iv .icon{ background-image: url(/images/moonphases/half2.png); } .info-slide-content.severe-almanac .frost-pane.purple .phase .date { font-family: Frutiger; color: #fff; font-size: 26px; padding-top: 0px; align-self: center; position: absolute; bottom: 12.5px; transform: scale(106%,100%) translate(-2.5px,0px); } .info-slide-content.severe-aroundcityinfo { display: flex; flex-direction: column; } .info-slide-content.severe-aroundcityinfo .frost-pane { width: 100%; background-size: 1065px 1150px; margin-top: 6px; max-height: 105.7px; display: flex; flex-direction: row; transform: translate(0px, 12px); } .info-slide-content.severe-aroundcityinfo .frost-pane.city.i { margin-top: 0px; background-position: -72px -330px; } .info-slide-content.severe-aroundcityinfo .frost-pane.city.ii { background-position: -72px -439.5px; } .info-slide-content.severe-aroundcityinfo .frost-pane.city.iii { background-position: -72px -551.5px; } .info-slide-content.severe-aroundcityinfo .frost-pane.city.iv { background-position: -72px -661px; } .info-slide-content.severe-aroundcityinfo .frost-pane.city .cityname { font-family: 'Frutiger 57 condensed'; color: #fff; position: absolute; font-size: 33.5px; left: 10px; top: 50%; width: 40%; transform: translate(0,-23.5%) scale(115%,100%); transform-origin: left; } .info-slide-content.severe-aroundcityinfo .frost-pane.city.i .cityname { left: 55px; } .info-slide-content.severe-aroundcityinfo .frost-pane.city.iv .cityname { left: 38px; } .info-slide-content.severe-aroundcityinfo .frost-pane.city .temp { font-family: 'Frutiger 57 Condensed'; color: #fff; position: absolute; font-size: 51px; left: 395px; top: 50%; width: 10%; transform: translate(0,-41%) scale(112%,100%); } .info-slide-content.severe-aroundcityinfo .frost-pane.city .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 40%; height: 115px; width: 115px; left: 475px; top: 50%; transform: translate(0,-51%); position: absolute; } .info-slide-content.severe-aroundcityinfo .frost-pane.city .wind { font-family: 'Frutiger 57 Condensed'; color: #fff; position: absolute; font-size: 36.25px; right: 92.5px; top: 50%; transform: translate(0,-23.5%) scale(115%,100%); transform-origin: right; } .city-info, .info-slide-content { display: flex; flex-direction: row; width: 100%; top: 10%; font-size: 110% } .frost-pane { color: #fff; font-family: Frutiger; font-size: 36px; text-shadow: #000 2px 2px 4px; max-height: 446.25px; background: url(/images/newbg/frostpane.svg); background-repeat: no-repeat; background-size: 1065px 1164px; /*background: linear-gradient(to right, rgba(42, 82, 188, 1) 0, rgba(42, 82, 188, .45) 100%);*/ transform: translate(0px, 10px); z-index: 388686; flex: 1 } .severe-city-info-slide .frost-pane { background: url(/images/newbg/severefrostpane.svg); background-repeat: no-repeat; background-size: 1065px 1164px; } .city-info .frost-pane:first-of-type { min-width: 55.5%; margin-right: 0.8%; background-position: -72px -329px; } .city-info .frost-pane.left * { position: absolute; padding-top: 5px; line-height: 182.5%; } .frost-pane .labels { font-family: 'Frutiger 57 Condensed'; color: #d8c422; left: 13.5%; transform: scale(115.5%,100%); transform-origin: left; font-size: 37.5px; } .city-info .frost-pane .data { font-family: 'Frutiger 57 Condensed'; transform: scale(113.5%,100%); transform-origin: right; right: 10%; font-size: 37.5px; text-align: right; } .city-info .frost-pane.right { background-position: -570px -329px; display: flex; flex-direction: column; align-items: center; padding-top: 30px } .city-info .frost-pane .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; width: 212px; height: 212px; position: absolute; transform: translate(0, -47.5px); } .city-info .frost-pane .conditions { display:flex; align-items: center; justify-content: center; position: absolute; font-size: 36px; font-weight: 500; line-height: 110%; top: 220px; text-align: center; text-transform: capitalize; overflow-wrap: break-word; width: 25%; height: 50px; transform: translate(-11px,0px) scale(104.5%,100%); transform-origin: left; } .city-info .frost-pane .temp { font-family: 'Frutiger Bold Cn'; font-size: 69px; font-weight: 700; position: absolute; top: 323px; letter-spacing: 2.5px; transform: translate(-6px,0px) scale(102.5%,100%);; transform-origin: left; } .frost-pane .title { color: #d8c422; font-size: 42px; text-transform: capitalize; } .frost-pane .content { font-size: 50px; line-height: 125% } .info-slide-content.daypart { flex-direction: row } .info-slide-content.daypart .frost-pane { max-height: 411.25px; padding-left: 62.5px; display: flex; background-position: -72px -364px; flex-direction: row; transform: translate(0px, 45px); } .info-slide-content.daypart .hour { width: 140px; align-items: center; margin-right: 58px; } .info-slide-content.daypart .hour.i .thing { height: 35px; width: 240px; padding-left: 40px; transform: translate(-40px, -35px); } .info-slide-content.daypart .hour.i .thingbg { position: absolute; right: 0px; height: 35px; width: 100%; background: #2a3a8a; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -94.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.daypart .hour.ii .thing { height: 35px; width: 198px; transform: translate(0px, -35px); } .info-slide-content.daypart .hour.ii .thingbg { position: absolute; height: 35px; width: 100%; background: #2a3a8a; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -334.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.daypart .hour.iii .thing { height: 35px; width: 198px; transform: translate(0px, -35px); } .info-slide-content.daypart .hour.iii .thingbg { position: absolute; height: 35px; width: 100%; background: #2a3a8a; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -532.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.daypart .hour.iv .thing { height: 35px; width: 240px; transform: translate(0px, -35px); } .info-slide-content.daypart .hour.iv .thingbg { position: absolute; height: 35px; width: 100%; background: #2a3a8a; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -730.5px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.daypart .hour .thing .thingtext { color: #fff; font-family: Frutiger; font-size: 31px; width: 140px; height: 100%; text-shadow: #000 0px 0px 0px; transform: translate(0px, 1px) scale(106%, 100%);; display: flex; align-items: center; justify-content: center; } .info-slide-content.daypart .tempbar { position: absolute; width: 140px; height: 0px; background-color: #fefd5d; background: linear-gradient(to top, #fffe21 0, #db5a14 100%); bottom: 20px } .info-slide-content.daypart .icon { width: 115px; height: 115px; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; position: absolute; top: 0px; margin-left: 12.5px; } .info-slide-content.daypart .condition { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 27px; text-shadow: #000 2px 2px 2px; height: 30px; width: 105%; text-align: center; transform: translate(-4px, 90px) scale(117%, 100%); padding: 10px, 0px; overflow-wrap: break-word; } .info-slide-content.daypart .tempbar .temp { color: #fff; font-family: Frutiger; font-size: 60px; text-shadow: #000 2px 2px 2px; height: 30px; width: 100%; text-align: center; transform: translate(0px, 15px) scale(102.5%, 100%); transform-origin: center; opacity: 0; } .info-slide-content.daypart .tempbar .wind { color: #24346f; position: absolute; font-family: Frutiger; font-size: 32px; text-shadow: #000 0px 0px 0px; height: 30px; width: 100%; text-align: center; bottom: 2.5px; opacity: 0; transform: scale(105%, 100%); } .forecast .frost-pane { padding: 1% 18% 1% 7%; height: 446.25px; background-position: -72px -329px; } .forecast .frost-pane .title { font-family: 'Frutiger 57 Condensed'; font-size: 41.5px; transform: scale(117%,100%); transform-origin: left; letter-spacing: .5px; } .info-slide-content.forecast .frost-pane { max-height: 446.25px; } .info-slide-content.forecast .content { font-family: 'Frutiger 57 Condensed'; height: 400px; max-height: 400px; transform: translate(-2.5px,-2.5px) scale(115%,100%); transform-origin: left; letter-spacing: 1.5px; } .info-slide-content.extended-forecast { width: 100%; } .info-slide-content.extended-forecast .frost-pane { transform: translate(0px, 45px); max-height: 411.25px; min-width: 165px } .info-slide-content.extended-forecast .frost-pane.iw { background-position: -72px -364px; } .info-slide-content.extended-forecast .frost-pane.iiw { background-position: -243.5px -364px; } .info-slide-content.extended-forecast .frost-pane.iiiw { background-position: -415px -364px; transform: translate(0px, 45px); min-width: 164px; max-width: 164px } .info-slide-content.extended-forecast .frost-pane.ivw { background-position: -586.5px -364px; 757 transform: translate(0px, 45px); min-width: 164px; max-width: 164px } .info-slide-content.extended-forecast .lfrost-pane { transform: translate(0px, 45px); max-height: 411.25px } .info-slide-content.extended-forecast .frost-pane .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 115px; width: 115px; margin-left: 25px; transform: translate(0px, 10px); } .info-slide-content.extended-forecast .lfrost-pane .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 115px; width: 115px; margin-left: 25px; transform: translate(0px, 10px); } .info-slide-content.extended-forecast .thingg { color: #fff; font-family: Frutiger; font-size: 30px; text-shadow: #000 2px 2px 4px; height: 35px; width: 100%; position: absolute; display: flex; top: 70px; z-index: 388688; text-align: center; } .info-slide-content.extended-forecast .thingbg { position: absolute; height: 35px; width: 100%; background: #2a3a8a; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.extended-forecast .thingg .thingday { color: #fff; font-family: 'Frutiger 57 condensed'; font-size: 30px; text-shadow: #000 2px 2px 4px; height: 35px; min-width: 165px; margin-left: 6.5px; padding-top: 3.5px; z-index: 388690; text-align: center; justify-content: center; transform: scale(115%,100%); } .info-slide-content.extended-forecast .thingg .thingday.iw { margin-left: 0px; padding-left: 5px; } .info-slide-content.extended-forecast .thingg .thingday.iiiw { min-width: 164px; }.info-slide-content.extended-forecast .thingg .thingday.ivw { min-width: 164px; margin-left: 7.5px; } .info-slide-content.extended-forecast .frost-pane .temphigh { color: #fff; font-family: Frutiger; font-weight: 400; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 70px; width: 100%; background: #5a8aec; box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; transform: translate(0px, 13.5px); } .info-slide-content.extended-forecast .frost-pane .temphigh span{ display: block; transform: scale(104.5%,100%); } .info-slide-content.extended-forecast .frost-pane.iw .temphigh { background: linear-gradient(to right, rgba(90, 138, 236, 1) 0, rgba(90, 138, 236, 0.89715) 100%); } .info-slide-content.extended-forecast .frost-pane.iiw .temphigh { background: linear-gradient(to right, rgba(90, 138, 236, 0.8933) 0, rgba(90, 138, 236, 0.79045) 100%); } .info-slide-content.extended-forecast .frost-pane.iiiw .temphigh { background: linear-gradient(to right, rgba(90, 138, 236, 0.8933) 0, rgba(90, 138, 236, 0.79045) 100%); } .info-slide-content.extended-forecast .frost-pane.ivw .temphigh { background:linear-gradient(to right, rgba(90, 138, 236, 0.6799) 0, rgba(90, 138, 236, 0.57815) 100%); } .info-slide-content.extended-forecast .lfrost-pane .temphigh { height: 70px; width: 100%; background: linear-gradient(to right, rgba(90, 138, 236, 0.5732) 0, rgba(90, 138, 236, 0.45) 100%); box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .35); transform: translate(0px, 13.5px); } .info-slide-content.extended-forecast .lfrost-pane .temphigh .temphightext { color: #fff; font-family: Frutiger; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 100%; width: 83.55%; display: flex; align-items: center; justify-content: center; transform: scale(104.5%,100%); } .info-slide-content.extended-forecast .frost-pane .templow { color: #fff; font-family: Frutiger; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 75px; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; transform: translate(0px, 23.5px) scale(104.5%,100%); } .info-slide-content.extended-forecast .lfrost-pane .templow { color: #fff; font-family: Frutiger; font-size: 58.5px; text-shadow: #000 2px 2px 2px; height: 75px; width: 83.55%; display: flex; align-items: center; justify-content: center; text-align: center; transform: translate(0px, 23.5px); } .info-slide-content.extended-forecast .frost-pane .conditions { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 27px; text-shadow: #000 2px 2px 2px; height: 113px; line-height: 132.5%; width: 100%; padding: 20px; padding-top: 7px; text-align: center; transform: translate(-2px, 12.5px) scale(115.5%,100%); overflow-wrap: break-word; } .info-slide-content.extended-forecast .lfrost-pane .conditions { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 27px; line-height: 132.5%; text-shadow: #000 2px 2px 2px; height: 113px; width: 83.55%; padding: 20px; padding-top: 7px; text-align: center; transform: translate(-2px, 12.5px) scale(115.5%,100%); overflow-wrap: break-word; } .info-slide-content.extended-forecast .linebreak { transform: translate(0px, 10px); height: 453.75px; width: 6.5px } .info-slide-content.extended-forecast .linebreak.iii { height: 453.75px; width: 7.5px } .info-slide-content.extended-forecast .lfrost-pane.vw { min-height: 100%; background: url(/images/newbg/frostpane.svg); background-repeat: no-repeat; background-size: 1065px 1164px; background-position: -757px -364px; z-index: 388686; flex: 1.4 } .info-slide-content.almanac { display: flex; flex-direction: column; } .info-slide-content.almanac .frost-pane.half { max-height: 204.725px; transform: translate(0,45px); background-position: -72px -364px; } .info-slide-content.almanac .frost-pane.half .averagetitle { font-family: Frutiger; color: #d8c422; font-size: 35px; padding-left: 50px; padding-top: 25px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .ahigh { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 132.5px; top: 87.5px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .ahightext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 266px; top: 74px; transform: scale(102.5%,100%); } .info-slide-content.almanac .frost-pane.half .alow { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 132.5px; top: 148.5px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .alowtext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 266px; top: 137.5px; transform: scale(102.5%,100%); } .info-slide-content.almanac .frost-pane.half .recordtitle { font-family: Frutiger; position: absolute; color: #d8c422; font-size: 35px; left: 398px; top: 25px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .rhigh { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 457.5px; top: 87.5px; transform: scale(106%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .rhightext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 567.5px; top: 74px; transform: scale(102.5%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .rhighyear { position: absolute; font-family: Frutiger; color: #fff; font-size: 36px; left: 663px; top: 84px; } .info-slide-content.almanac .frost-pane.half .rlow { position: absolute; font-family: Frutiger; color: #fff; font-size: 31px; left: 457.5px; top: 148.5px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .rlowtext { position: absolute; font-family: Frutiger; color: #fff; font-size: 54px; left: 567.5px; top: 147.5px; transform: scale(102.5%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.half .rlowyear { position: absolute; font-family: Frutiger; color: #fff; font-size: 36px; left: 663px; top: 147.5px; } .info-slide-content.almanac .thing { position: absolute; top: 70px; height: 35px; width: 100%; transform-origin: left; padding-top: 5px; padding-left: 65px; } .info-slide-content.almanac .thing .thingtext { width: 100%; padding-left: 2.5px; color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: #000 2px 2px 4px; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.almanac .thing .thingbg { position: absolute; right: 0; top: 0; background: #2a3a8a; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.almanac .frost-pane.purple { transform: translate(0,45px); max-height: 203.725px; background-color: rgb(42, 58, 138); background: linear-gradient(to right, rgb(42, 58, 138, 0) 0, rgb(42, 58, 138, .75) 100%) } .info-slide-content.almanac .frost-pane.purple .sunrisetitle { font-family: Frutiger; color: #d8c422; position: absolute; font-size: 36px; left: 20px; top: 55.5px; transform: scale(106.5%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.purple .sunrisetext { font-family: Frutiger; color: #fff; position: absolute; font-size: 38px; left: 167px; top: 54px; transform: scale(105.5%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.purple .sunsettitle { font-family: Frutiger; color: #d8c422; position: absolute; font-size: 36px; left: 20px; top: 125.5px; transform: scale(106.5%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.purple .sunsettext { font-family: Frutiger; color: #fff; position: absolute; font-size: 38px; left: 167px; top: 124px; transform: scale(105.5%,100%); transform-origin: left; } .info-slide-content.almanac .frost-pane.purple .phase { display: flex; flex-direction: column; width: 100px; padding-right: 0px; height: 100%; top: 0; position: absolute; } .info-slide-content.almanac .frost-pane.purple .phase.iv{ right: 43.5px; } .info-slide-content.almanac .frost-pane.purple .phase.iii{ right: 169px; } .info-slide-content.almanac .frost-pane.purple .phase.ii{ right: 294.5px; } .info-slide-content.almanac .frost-pane.purple .phase.i{ right: 421px; } .info-slide-content.almanac .frost-pane.purple .phase .phasetext { font-family: Frutiger; color: #d8c422; font-size: 23px; padding-top: 20.5px; align-self: center; transform: translate(-4.5px, 0px) scale(108%,100%); } .info-slide-content.almanac .frost-pane.purple .phase .icon { background-repeat: no-repeat; background-size: contain; background-position: center center; width: 126px; min-height: 126px; position: absolute; top: 33px; align-self: center; -webkit-filter: drop-shadow(0 0 8px rgba(0, 0, 0, .95)); filter: drop-shadow(0 0 8px rgba(0, 0, 0, .95)); } .info-slide-content.almanac .frost-pane.purple .phase.i .icon{ background-image: url(/images/moonphases/NEW.png); } .info-slide-content.almanac .frost-pane.purple .phase.ii .icon{ background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url(/images/moonphases/FIRST.png); } .info-slide-content.almanac .frost-pane.purple .phase.iii .icon{ background-image: url(/images/moonphases/FULL.png); } .info-slide-content.almanac .frost-pane.purple .phase.iv .icon{ background-image: url(/images/moonphases/LAST.png); } .info-slide-content.almanac .frost-pane.purple .phase .date { font-family: Frutiger; color: #fff; font-size: 26px; padding-top: 0px; align-self: center; position: absolute; bottom: 12.5px; transform: scale(106%,100%) translate(-2.5px,0px); } .info-slide-content.aroundcityinfo { display: flex; flex-direction: column; } .info-slide-content.aroundcityinfo .frost-pane { width: 100%; background-size: 1065px 1150px; margin-top: 6px; max-height: 105.7px; display: flex; flex-direction: row; transform: translate(0px, 12px); } .info-slide-content.aroundcityinfo .frost-pane.city.i { margin-top: 0px; background-position: -72px -330px; } .info-slide-content.aroundcityinfo .frost-pane.city.ii { background-position: -72px -439.5px; } .info-slide-content.aroundcityinfo .frost-pane.city.iii { background-position: -72px -551.5px; } .info-slide-content.aroundcityinfo .frost-pane.city.iv { background-position: -72px -661px; } .info-slide-content.aroundcityinfo .frost-pane.city .cityname { font-family: 'Frutiger 57 condensed'; color: #fff; position: absolute; font-size: 33.5px; left: 10px; top: 50%; width: 40%; transform: translate(0,-23.5%) scale(115%,100%); transform-origin: left; } .info-slide-content.aroundcityinfo .frost-pane.city.i .cityname { left: 55px; } .info-slide-content.aroundcityinfo .frost-pane.city.iv .cityname { left: 38px; } .info-slide-content.aroundcityinfo .frost-pane.city .temp { font-family: 'Frutiger 57 Condensed'; color: #fff; position: absolute; font-size: 51px; left: 395px; top: 50%; width: 10%; text-align: center; transform: translate(0,-41%) scale(112%,100%); } .info-slide-content.aroundcityinfo .frost-pane.city .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 40%; height: 115px; width: 115px; left: 475px; top: 50%; transform: translate(0,-51%); position: absolute; } .info-slide-content.aroundcityinfo .frost-pane.city .wind { font-family: 'Frutiger 57 Condensed'; color: #fff; position: absolute; font-size: 36.25px; right: 92.5px; top: 50%; transform: translate(0,-23.5%) scale(115%,100%); transform-origin: right; } .info-slide-content.airportpanel .leftpanel { max-height: 446.25px; max-width: 61%; min-width: 61%; margin-right: .8%; align-items: center; transform: translate(0px, 10px); } .info-slide-content.airportpanel .thing { top: 70px; position: absolute; padding-left: 75px; padding-top: 5px; height: 35px; width: 105% } .info-slide-content.airportpanel .thing .thingtext { width: 100%; height: 35px; color: #fff; font-family: Frutiger; font-size: 30px; transform-origin: left; text-shadow: #000 2px 2px 4px; transform: scale(105.5%,100%); transform-origin: left; } .info-slide-content.airportpanel .thing .thingbg { position: absolute; right: 0; top: 0; background: rgba(36, 30, 149,1); height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.airportpanel .leftpanel .frost-pane.top { margin-bottom: 7.063px; height: 188.125px; width: 100%; align-items: center; transform: translate(0px, 35px); background-position: -72px -364px; } .info-slide-content.airportpanel .leftpanel .frost-pane.top .title { position: absolute; top: 27.5px; left: 45px; font-size: 37px; transform: scale(106%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.top .delay { color: #fff; font-family: Frutiger; font-size: 27px; text-shadow: #000 2px 2px 4px; position: absolute; top: 97.5px; left: 67.5px; transform: scale(104.5%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel em{ font-family: Frutiger; font-style: normal; transform-origin: left; color: #fff; font-size: 39px; } .info-slide-content.airportpanel .leftpanel .frost-pane.top .delayfill { color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: #000 2px 2px 4px; position: absolute; top: 93.5px; left: 252.5px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.top .reason { color: #fff; font-family: Frutiger; font-size: 27px; text-shadow: #000 2px 2px 4px; position: absolute; top: 159px; left: 67.5px; transform: scale(104.5%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.top .reasonfill { color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: #000 2px 2px 2px; position: absolute; top: 150px; left: 252.5px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.bottom .title { position: absolute; top: 27.5px; left: 27.5px; font-size: 37px; transform: scale(106%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.bottom .delay { color: #fff; font-family: Frutiger; font-size: 27px; text-shadow: #000 2px 2px 4px; position: absolute; top: 87.5px; left: 67.5px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.bottom .delayfill { color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: #000 2px 2px 4px; position: absolute; top: 85px; left: 252.5px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.bottom .reason { color: #fff; font-family: Frutiger; font-size: 27px; text-shadow: #000 2px 2px 4px; position: absolute; top: 140px; left: 67.5px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.bottom .reasonfill { color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: #000 2px 2px 4px; position: absolute; top: 142.5px; left: 252.5px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.airportpanel .leftpanel .frost-pane.bottom .source { color: #d8c422; font-family: Frutiger; font-size: 24px; transform: scale(104%, 100%); text-shadow: #000 2px 2px 2px; position: absolute; bottom: 5px; left: 37.5px; } .info-slide-content.airportpanel .leftpanel .frost-pane.bottom { height: 216.062px; width: 100%; align-items: center; transform: translate(0px, 35px); background-position: -72px -559px; } .info-slide-content.airportpanel .frost-pane.right { transform: translate(0px, 45px); max-height: 446.25px; background-position: -618.5px -364px; } .info-slide-content.airportpanel .frost-pane.right .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 185px; width: 185px; margin-left: 75px; top: -15px; transform: translate(-1.5%, 0); } .info-slide-content.airportpanel .frost-pane.right .conditions { display:flex; align-items: center; justify-content: center; font-weight: 500; font-size: 32px; text-align: center; text-transform: capitalize; overflow-wrap: break-word; height: 50px; width: 100%; padding: 0% 37.5%; text-align: center; transform: translate(-2.25%, 0) scale(104.5%, 100%); position: absolute; top: 195px; } .info-slide-content.airportpanel .frost-pane.right .temp { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 80px; font-weight: 600; width: 100%; position: absolute; top: 315px; text-align: center; letter-spacing: 2.5px; transform: translate(-1.5%, 0) scale(112.5%, 100%); } .info-slide-content.otherairports .thing { width: 100%; position: absolute; top: 70px; height: 35px; font-family: Frutiger; font-weight: 600; font-size: 26px; color: #d8c422; text-shadow: #000 2px 2px 4px; line-height: 150%; } .info-slide-content.otherairports .thing .thingtext { width: 100%; height: 35px; font-family: Frutiger; transform: scale(104%,100%); font-weight: 600; font-size: 26px; color: #d8c422; line-height: 150%; padding-left: 305px; text-shadow: #000 2px 2px 4px; } .info-slide-content.otherairports .thing .thingbg { position: absolute; right: 0; top: 0; background: rgba(36, 30, 149,1); height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.otherairports .thing .temp { position: absolute; right: 370px; } .info-slide-content.otherairports .thing .delay { position: absolute; right: 80px; } .info-slide-content.otherairports .frost-pane { max-height: 411.25px; transform: translate(0, 45px); flex-direction: column; background-position: -72px -364px; } .info-slide-content.otherairports .airport { width: 100%; height: 100px; display: flex; flex-direction: row; align-items: center; } .info-slide-content.otherairports .airport.i { margin-top: 8px; } .info-slide-content.otherairports .airport .airportname { font-family: 'Frutiger 57 Condensed'; transform: scale(112.5%,100%); transform-origin: left; color: #fff; position: fixed; font-size: 34.5px; left: 10px; } .info-slide-content.otherairports .airport.i .airportname { left: 38px; } .info-slide-content.otherairports .airport.iv .airportname { left: 28px; } .info-slide-content.otherairports .airport .temp { font-family: 'Frutiger 57 Condensed'; transform: scale(112.5%,100%); transform-origin: left; color: #fff; width: 80px; text-align: center; position: relative; font-size: 40.5px; left: 437px; } .info-slide-content.otherairports .airport .icon { background-repeat: no-repeat; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; position: fixed; left: 513px; height: 112px; width: 112px; } .info-slide-content.otherairports .airport .delay { font-family: Frutiger; transform: translate(0,3px) scale(104%,100%); transform-origin: left; color: #fff; position: fixed; font-size: 33px; right: 71px; } .info-slide-content.otherairports .airport .delay em{ font-family: Frutiger; font-style: normal; transform-origin: left; color: #fff; font-size: 39px; } .info-slide-content.otherairports .source { color: #d8c422; font-family: Frutiger; font-size: 24px; transform: scale(104%, 100%); text-shadow: #000 2px 2px 2px; position: absolute; top: 5px; right: 67.5px; } .airport-slide #subhead-source { color: #d8c422; font-family: Frutiger; font-size: 24px; transform: translateY(-16%) scale(106%, 100%); text-shadow: #000 2px 2px 2px; position: absolute; right: 89px; } .info-slide-content.surfreport .frost-pane.left { max-width: 60.8%; min-width: 60.8%; margin-right: .8%; align-items: center; transform: translate(0px, 45px); max-height: 411.25px; align-items: center; background-position: -72px -364px; } .info-slide-content.surfreport .thing { position: absolute; width: 100%; height: 40px; } .info-slide-content.surfreport .thingbg { position: absolute; right: 0; top: 5px; background: #2a3a8a; height: 40px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -393px; -webkit-mask-size: 1065px 1385px; } .info-slide-content.surfreport .thingtext { position: absolute; color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: #000 2px 2px 4px; padding-top: 13.5px; padding-left: 67.5px; height: 40px; width: 105% } .info-slide-content.surfreport .frost-pane.left .watertemp { font-size: 34px; position: absolute; top: 232.5px; left: 46px; transform: scale(106%, 100%); transform-origin: left; } .info-slide-content.surfreport .frost-pane.left .wind { font-size: 34px; position: absolute; top: 62px; left: 46px; transform: scale(107%, 100%); transform-origin: left; } .info-slide-content.surfreport .frost-pane.left .waveperiod { font-size: 34px; position: absolute; top: 147px; left: 46px; transform: scale(107%, 100%); transform-origin: left; } .info-slide-content.surfreport .frost-pane.left .windvalue { font-size: 40px; position: absolute; top: 57.5px; left: 167.5px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.surfreport .frost-pane.left .waveperiodvalue { font-size: 40px; position: absolute; top: 142px; left: 280px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.surfreport .frost-pane.left .watertempbar { position: absolute; bottom: 29.5px; left: 53px; height: 48px; width: 441px; background: linear-gradient(to right, #6aa3f2 0, #2f4aa7 28%, #84806c 41%,#e1d226 58%, #df9705 76%, #d34308 87%, #710002 99%) } .info-slide-content.surfreport .frost-pane.left .watertempbar .temps { position: absolute; top:0; font-family: Frutiger; font-size: 35.5px; color: #171717; text-shadow: #000 0px 0px 0px; word-spacing: 13.25px; text-align: center; padding-top: 11.5px; padding-left: 0px; transform: scale(103%, 100%); width: 100%; } .info-slide-content.surfreport .frost-pane.left .watertempbar .temparrow { position: absolute; bottom: 20.5px; left: 325px; width: 0; height: 0; border-left: 13.5px solid transparent; border-right: 13.5px solid transparent; border-top: 31.5px solid #fff; -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1)); filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 1)) } .info-slide-content.surfreport .frost-pane.left .watertempbar .temp { font-family: Frutiger; font-size: 45px; color: #fff; text-shadow: #000 0px 0px 0px; position: absolute; top: -77.5px; left: -17.5px; transform: scale(105%, 100%); } .info-slide-content.surfreport .title { font-size: 32px } .info-slide-content.surfreport .frost-pane.right { transform: translate(0px, 45px); height: 411.25px; width: 100%; background-position: -617px -364px; } .info-slide-content.surfreport .frost-pane.right .title.waveheight { position: absolute; font-size: 35px; width: 100%; text-align: center; top: 14px; padding-left: 61px; padding-right: 70px; line-height: 110%; transform: scale(105%, 100%); } .info-slide-content.surfreport .frost-pane.right .wavebar { position: absolute; width: 125px; height: 110px; text-align: center; bottom: 31px; left: 110px; color: #171717; text-shadow: #000 0px 0px 0px; background: linear-gradient(to top, #5f6c55 0, #16c0dd 65%); padding-top: 10.5px; } .info-slide-content.surfreport .frost-pane.right .wavebar .wavevalue { font-size: 42px; transform: scale(103.5%, 100%); } .info-slide-content.surfreport .frost-pane.right .wavebar .feet { font-size: 28px; transform: scale(103.5%, 100%); } .info-slide-content.coastalwaters .thing { height: 35px; width: 100%; position: absolute; top: 70px; z-index: 388687; } .info-slide-content.coastalwaters .thing .thingbg { position: absolute; right: 0; top: 0; background: #2a3a8a; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.coastalwaters .thing .thingtext { height: 35px; width: 100%; color: #fff; font-size: 23px; text-shadow: #000 2px 2px 4px; padding-top: 9px; padding-left: 63px; transform: scale(107%,100%); transform-origin: left; } .info-slide-content.coastalwaters .frost-pane.content { position: absolute; width: 100%; height: 411.25px; top: 95px; padding-top: 10px; padding-left: 52px; background-position: -72px -364px; } .info-slide-content.coastalwaters.warnings .frost-pane.content .warningtext { font-family: 'Frutiger 57 Condensed'; font-size: 40px; color: #d8c422; width: 100%; height: 100%; transform: scale(115%, 100%); transform-origin: left; padding-right: 200px; line-height: 114%; } .info-slide-content.coastalwaters.forecasts .frost-pane.content .title.day { font-family: 'Frutiger 57 Condensed'; font-size: 40px; line-height: 114%; transform: scale(115%, 100%); transform-origin: left; } .info-slide-content.coastalwaters.forecasts .frost-pane.content .forecasttext { font-family: 'Frutiger 57 Condensed'; font-size: 40px; line-height: 114%; transform: scale(115%, 100%); transform-origin: left; padding-right: 200px; margin-bottom: 46px; } .info-slide-content.tides { width: 100%; height: 200px; flex-direction: column; } .info-slide-content.tides .thingnotpurple { margin-top: 7px; height: 40px; font-family: Frutiger; font-size: 28.5px; color: #d8c422; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .75)); line-height: 150%; font-weight: 600; } .info-slide-content.tides .thingnotpurple .hightide { transform: scale(105%, 100%); display: block; position: absolute; left: 301px; } .info-slide-content.tides .thingnotpurple .lowtide { left: 596px; display: block; position: absolute; transform: scale(105%, 100%); } .info-slide-content.tides .frost-pane.top { min-height: 139px; transform: translate(0,0); background-position: -72px -364px; } .info-slide-content.tides .frost-pane .place { margin-top: 14px; margin-left: 48px; font-size: 33px; font-family: 'Frutiger 57 Condensed'; transform: scale(114%, 100%); transform-origin: left; } .info-slide-content.tides .frost-pane .hightide { position: absolute; left: 290px; top: 45px; line-height: 127%; font-size: 32.7px; font-family: 'Frutiger 57 Condensed'; transform: scale(114%, 100%); transform-origin: left; } .info-slide-content.tides .frost-pane .lowtide { position: absolute; left: 575px; top: 45px; line-height: 126%; font-size: 32.7px; font-family: 'Frutiger 57 Condensed'; transform: scale(114%, 100%); transform-origin: left; } .info-slide-content.tides .frost-pane.mid .place { margin-top: 14px; } .info-slide-content.tides .frost-pane.bottom .place { margin-top: 9px; } .info-slide-content.tides .frost-pane.mid .hightide { top: 44px; } .info-slide-content.tides .frost-pane.mid .lowtide { top: 44px; } .info-slide-content.tides .frost-pane .sunrise { position: absolute; left: 48px; top: 64px; font-size: 35.5px; font-family: Frutiger; transform: scale(105%, 100%); transform-origin: left; } .info-slide-content.tides .frost-pane .sunset { position: absolute; left: 470px; top: 64px; font-size: 35.5px; font-family: Frutiger; transform: scale(105%, 100%); transform-origin: left; } .info-slide-content.tides .frost-pane .sunrisetext { position: absolute; left: 200px; top: 62.5px; font-size: 32.7px; font-family: 'Frutiger 57 Condensed'; transform: scale(115%, 100%); } .info-slide-content.tides .frost-pane .sunsettext { position: absolute; left: 617.5px; top: 62.5px; font-size: 32.7px; font-family: 'Frutiger 57 Condensed'; transform: scale(115%, 100%); transform-origin: left; } .info-slide-content.tides .frost-pane.mid { min-height: 140px; margin-top: 4px; transform: translate(0,0); background-position: -72px -507px; } .info-slide-content.tides .frost-pane.bottom { height: 204px; margin-top: 13px; transform: translate(0,0); background-position: -72px -660px; } .info-slide-content.health-forecast { flex-direction: row; } .info-slide-content.health-forecast .frost-pane { max-height: 411.25px; } .info-slide-content.health-forecast .thing { color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: 2px 2px 4px #000; height: 35px; width: 100%; position: absolute; top: 70px; } .info-slide-content.health-forecast .thing .thingtext { width: 100%; padding-left: 2.5px; color: #fff; font-family: Frutiger; font-size: 33px; padding-top: 4px; text-shadow: 2px 2px 4px #000; transform: scale(105%,100%); padding-left: 62.5px; transform-origin: left; } .info-slide-content.health-forecast .thing .thingbg { position: absolute; right: 0; top: 0; background: #241e95; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.health-forecast .frost-pane.mainforecast { margin-top: 35px; max-width: 41.25%; background-position: -72px -364px; } .info-slide-content.health-forecast .frost-pane.mainforecast .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 214px; width: 214px; margin-left: 75px; top: -8px; position: absolute; } .info-slide-content.health-forecast .frost-pane.mainforecast .low { position: absolute; top: 215px; left: 65px; font-size: 26.5px; transform: scale(108%,100%); transform-origin: left; } .info-slide-content.health-forecast .frost-pane.mainforecast .high { position: absolute; top: 215px; right: 70px; font-size: 26.5px; transform: scale(108%,100%); transform-origin: right; } .info-slide-content.health-forecast .frost-pane.mainforecast .lowtext { width: 30%; position: absolute; top: 265px; left: 39px; font-size: 66px; transform: scale(105%,100%); text-align: center; } .info-slide-content.health-forecast .frost-pane.mainforecast .hightext { width: 30%; height: 47.5%; position: absolute; top: 265px; right: 44px; font-size: 66px; transform: scale(105%,100%); text-align: center; } .info-slide-content.health-forecast .frost-pane.mainforecast .title.heatwind { font-family: 'Frutiger 57 Condensed'; width: 100%; position: absolute; bottom: 12.5px; font-size: 37.5px; text-align: center; transform: scale(110.5%,100%); text-align: center; } .info-slide-content.health-forecast .frost-pane.forecastdetails { margin-top: 35px; margin-left: 5px; background-position: -442px -364px; } .info-slide-content.health-forecast .frost-pane.forecastdetails .title { width: 100%; font-size: 33.25px; padding-left: 12.5px; padding-bottom: 0px; height: 40.5px; text-transform: none; font-family: 'Frutiger Bold Cn'; background: linear-gradient(to right, rgba(33, 27, 140, 1) 0, rgba(33, 27, 140, 0) 93%); } .info-slide-content.health-forecast .frost-pane.forecastdetails .title span { display: block; transform: scale(105.5%,100%) translate(0,-2.5px); transform-origin: left; } .info-slide-content.health-forecast .frost-pane.forecastdetails .title.humid span { display: block; transform: scale(105.5%,100%) translate(0,0px); transform-origin: left; } .info-slide-content.health-forecast .frost-pane.forecastdetails .title.chanceprecip { position: absolute; top: 19px; left: 50px; } .info-slide-content.health-forecast .frost-pane.forecastdetails .title.humid { position: absolute; top: 154px; left: 50px; } .info-slide-content.health-forecast .frost-pane.forecastdetails .title.wind { position: absolute; top: 292.5px; left: 50px; } .info-slide-content.health-forecast .frost-pane.forecastdetails .chancepreciptext { position: absolute; top: 78px; left: 95px; font-size: 53px; transform: scale(104.5%,100%); transform-origin: left; } .info-slide-content.health-forecast .frost-pane.forecastdetails .humidtext { position: absolute; top: 215px; left: 95px; font-size: 53px; transform: scale(104.5%,100%); transform-origin: left; } .info-slide-content.health-forecast .frost-pane.forecastdetails .windtext { position: absolute; top: 352px; left: 95px; font-size: 53px; transform: scale(104.5%,100%); transform-origin: left; } .info-slide-content.allergy .leftpanel { max-height: 446.25px; transform: translate(0,10px); min-width: 62.5%; } .info-slide-content.allergy .frost-pane.pollen { height: 411.25px; transform: translate(0,35px); background-position: -72px -364px; width: 100%; } .info-slide-content.allergy .leftpanel .thing { color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: 2px 2px 4px #000; height: 35px; width: 100%; position: absolute; padding-left: 68px; } .info-slide-content.allergy .leftpanel .thing .thingbg { position: absolute; right: 0; top: 0; background: #241e95; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; z-index: 0; } .info-slide-content.allergy .leftpanel .thing .thingtext { position: absolute; width: 100%; color: #fff; font-family: Frutiger; font-size: 33px; padding-top:4px; text-shadow: 2px 2px 4px #000; height: 35px; text-shadow: #000 2px 2px 4px; transform-origin: left; z-index: 1 } .info-slide-content.allergy .frost-pane.pollen .thing span{ transform: scale(105%,100%); transform-origin: left; } .info-slide-content.allergy .frost-pane.pollen .pollenbar { position: absolute; font-size: 35px; height: 50px; } .info-slide-content.allergy .frost-pane.pollen .pollenbar .type { font-family: 'Frutiger 57 Condensed'; transform: scale(115%,100%) translate(0,-3.5px); transform-origin: left; font-size: 34px; } .info-slide-content.allergy .frost-pane.pollen .pollenbar .treetype { font-size: 29px; transform: translate(0,-2px); } .info-slide-content.allergy .frost-pane.pollen .scale { position: absolute; font-size: 35px; height: 50px; bottom: -19px; font-size: 25px; color: #d8c422; } .info-slide-content.allergy .frost-pane.pollen .scale { position: absolute; font-family: 'Frutiger 57 Condensed'; font-size: 27.5px; height: 50px; bottom: -16px; color: #d8c422; transform: scale(117%,100%); } .info-slide-content.allergy .frost-pane.pollen .scale.low { left: 227.5px; transform-origin: left; } .info-slide-content.allergy .frost-pane.pollen .scale.high { right: 22.5px; transform-origin: right; } .info-slide-content.allergy .frost-pane.pollen .pollenbar .bar { height: 25px; width: 300px; position: absolute; left: 202.5px; background: linear-gradient(to right, #c8bb52 0, #f06509 70%, #921413 100%); } .info-slide-content.allergy .frost-pane.pollen .pollenbar .bar .bararrow { position: absolute; bottom: -5px; left: -10px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 34px solid #fff; -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)) } .info-slide-content.allergy .frost-pane.pollen .pollenbar.tree { top: 54px; left: 30px; } .info-slide-content.allergy .frost-pane.pollen .pollenbar.grass { top: 145px; left: 0px; } .info-slide-content.allergy .frost-pane.pollen .pollenbar.grass .bar { left: 232.5px; } .info-slide-content.allergy .frost-pane.pollen .pollenbar.weed { top: 233px; left: 0px; } .info-slide-content.allergy .frost-pane.pollen .pollenbar.weed .bar { left: 232.5px; } .info-slide-content.allergy .frost-pane.pollen .pollenbar.mold { top: 333px; left: 27.5px; } .info-slide-content.allergy .rightpanel { margin-left: 5px; max-height: 446.25px; transform: translate(0,10px); width: 100%; } .info-slide-content.allergy .frost-pane.totalpollen { width: 100%; height: 411.25px; transform: translate(0,102.5px); background-position: -630px -431.5px; } .info-slide-content.allergy .rightpanel .thing { height: 102.5px; width: 100%; position: absolute; text-align: center; } .info-slide-content.allergy .rightpanel .thing .thingtext { display: flex; color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 32.5px; line-height: 125%; text-shadow: 2px 2px 4px #000; padding-left: 52.5px; padding-top: 7.5px; height: 35px; text-shadow: #000 2px 2px 4px; transform: scale(113.5%,100%); transform-origin: left; } .info-slide-content.allergy .rightpanel .thing .thingbg { position: absolute; right: 0; top: 0; background: #241e95; height: 102.5px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -630px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.allergy .frost-pane.totalpollen .cat { font-family: 'Frutiger 57 Condensed'; font-size: 61.5px; width: 92%; position: absolute; top: 72.5px; text-align: center; transform: scale(114%,100%) } .info-slide-content.allergy .frost-pane.totalpollen .desc { font-family: 'Frutiger 57 Condensed'; font-size: 42.5px; width: 92%; position: absolute; top: 170px; text-align: center; transform: scale(115%,100%) } .info-slide-content.allergy .frost-pane.totalpollen .moreinfo { font-family: 'Frutiger 57 Condensed'; font-size: 34px; width: 93%; line-height: 144%; position: absolute; top: 19.5px; text-align: center; } .info-slide-content.Aches-Breath { flex-direction: column; } .info-slide-content.Aches-Breath .thing { height: 35px; width: 100%; transform: translate(0, 10px); } .info-slide-content.Aches-Breath .thing .thingbg { position: absolute; right: 0; top: 0; background: #241e95; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.Aches-Breath .thing .thingtext { position: absolute; width: 100%; color: #fff; font-family: Frutiger; font-size: 33px; padding-top:4px; text-shadow: 2px 2px 4px #000; height: 35px; padding-left: 67.5px; text-shadow: #000 2px 2px 4px; transform-origin: left; } .info-slide-content.Aches-Breath .frost-pane { transform: translate(0, 10px); } .info-slide-content.Aches-Breath .frost-pane.aches { max-height: 212.725px; } .info-slide-content.Aches-Breath .frost-pane.aches .frost-panebg { position: absolute; height: 100%; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -364px; -webkit-mask-size: 1065px 1164px; background: rgba(19, 116, 241, 1); } .info-slide-content.Aches-Breath .frost-pane .whitetitle { font-size: 33px; font-family: 'Frutiger 57 Condensed'; transform: scale(117%,100%); transform-origin: left; } .info-slide-content.Aches-Breath .frost-pane .desc { font-family: 'Frutiger 57 Condensed'; font-size: 26.5px; color: #16bfdd; position: absolute; left: 20px; transform: scale(117%,100%); transform-origin: left; } .info-slide-content.Aches-Breath .frost-pane.aches .desc { top: 115px; } .info-slide-content.Aches-Breath .frost-pane.aches .whitetitle { position: absolute; top: 60px; left: 30px; } .info-slide-content.Aches-Breath .frost-pane.breath .desc { top: 110px; left: 36px; line-height: 115% } .info-slide-content.Aches-Breath .frost-pane.breath .whitetitle { position: absolute; top: 55px; font-size: 34px; left: 17.5px; } .info-slide-content.Aches-Breath .frost-pane.breath { max-height: 211.225px; } .info-slide-content.Aches-Breath .frost-pane.breath .frost-panebg { position: absolute; height: 100%; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -577px; -webkit-mask-size: 1065px 1164px; background: rgba(23, 24, 215, 1); } .info-slide-content.Aches-Breath .frost-pane .bar { height: 23px; width: 300px; position: absolute; left: 455px; top: 65px; background: linear-gradient(to right, #7a7a5e 0, #c8bb52 25%, #f06509 75%, #9f2116 100%); } .info-slide-content.Aches-Breath .frost-pane.breath .bar { top: 60px; } .info-slide-content.Aches-Breath .frost-pane .bar .bararrow { position: absolute; bottom: -5px; left: -10px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 35px solid #fff; -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); } .info-slide-content.Aches-Breath .frost-pane .bar .bararrowtext { font-family: Frutiger; font-size: 30px; color: #fff; text-shadow: 0px 0px 0px; position: absolute; top: -67.5px; left: -77px; width: 150px; transform: scale(107%,100%); text-align: center; } .info-slide-content.airquality .leftpanel { min-width: 52.5%; max-height: 446.25px; transform: translate(0,10px); } .info-slide-content.airquality .frost-pane.airforecast { width: 100%; height: 411.25px; position: absolute; top:0; transform: translate(0,35px); background-position: -72px -364px; } .info-slide-content.airquality .leftpanel .thing { height: 35px; width: 100%; } .info-slide-content.airquality .leftpanel .thing .thingbg { position: absolute; right: 0; top: 0; background: #2a3a8a; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.airquality .leftpanel .thing .thingtext { position: absolute; width: 100%; color: #fff; font-family: Frutiger; font-size: 33px; padding-top: 4px; text-shadow: 2px 2px 4px #000; height: 35px; padding-left: 67.5px; text-shadow: #000 2px 2px 4px; transform-origin: left; } .info-slide-content.allergy .frost-pane.airforecast .thing span{ transform: scale(105%,100%); transform-origin: left; } .info-slide-content.airquality .frost-pane.airforecast .bar .bar { color: #fff; font-family: Frutiger; font-size: 31.5px; line-height: 130%; text-shadow: 2px 2px 4px #000; filter: drop-shadow(2px 2px 2.4px #000); height: 60px; background: #241e95; width: 110px; margin-top: 16.75px; margin-left: 80px; transform: translate(0, 10px); } .info-slide-content.airquality .frost-pane.airforecast .bar .bar .forecast { font-family: 'Frutiger 57 Condensed'; position: absolute; left: 130px; top: 14px; text-shadow: 0px 0px 0px #000; transform: scale(112.5%,100%); transform-origin: left; } .info-slide-content.airquality .frost-pane.airforecast .bar .arrow { position: absolute; bottom: 35px; left: 37.5px; width: 0; height: 0; border-left: 16.5px solid transparent; border-right: 16.5px solid transparent; border-top: 32.5px solid #fff; transform: rotate(-90deg); -webkit-filter: drop-shadow(-4px 2px 4px rgba(0, 0, 0, .75)); filter: drop-shadow(-4px 2px 4px rgba(0, 0, 0, .75)) } .info-slide-content.airquality .rightpanel { margin-left: 5px; max-height: 446.25px; width: 100%; transform: translate(0,10px); } .info-slide-content.airquality .frost-pane.primarypolute { width: 100%; height: 356.25px; background-position: -541.359px -419px; transform: translate(0,90px); } .info-slide-content.airquality .rightpanel .thing { display: flex; width: 100%; position: absolute; padding-left: 60px; padding-top: 1px; text-align: center; } .info-slide-content.airquality .rightpanel .thing .thingbg { position: absolute; right: 0; top: 0; background: #2a3a8a; height: 90px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -541.359px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.airquality .rightpanel .thing .thingtext { position: absolute; width: 88%; color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 35px; line-height: 115%; text-shadow: 2px 2px 4px #000; height: 90px; left: 0; transform: scale(112.5%,100%); height: 35px; text-shadow: #000 2px 2px 4px; } .info-slide-content.airquality .frost-pane.primarypolute .source { color: #fff; font-family: 'Frutiger 57 condensed'; font-size: 26px; text-shadow: 2px 2px 4px #000; position: absolute; bottom: 11px; left: 32.5px; transform: scale(115%,100%); transform-origin: left; } .info-slide-content.airquality .frost-pane.primarypolute .ozoneaction { color: #fff; font-family: Frutiger; text-shadow: 2px 2px 4px #000; position: absolute; bottom: 87.5px; left: 65px; width: 100% } .info-slide-content.airquality .frost-pane.primarypolute .pollutant { color: #fff; font-family: 'Frutiger 57 condensed'; text-shadow: 2px 2px 4px #000; position: absolute; top: 58px; font-size: 42.5px; text-align: center; width: 89%; transform: scale(113.5%,100%); } .info-slide-content.airquality .frost-pane.primarypolute .ozoneaction { background-image: url(/images/newbg/ozoneActionLogo.png); background-size: 200px 80px; width: 220px; height: 100px; background-position: 15px -1px; background-repeat: no-repeat; } .info-slide-content.airquality .frost-pane.primarypolute .ozoneaction .icon { color: #fff; font-family: Frutiger; text-shadow: 2px 2px 4px #000; width: 100px; height: 80px; background: url(/images/yes2.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .info-slide-content.airquality .frost-pane.primarypolute .ozoneaction .ozone{ color: #fff; font-family: Frutiger; text-shadow: 2px 2px 4px #000; font-weight: bold; font-style: italic; position: absolute; left: 90px; top: 15px; font-size: 30px; } .info-slide-content.airquality .frost-pane.primarypolute .ozoneaction .actionday { color: #fff; font-family: Frutiger; font-size: 25px; text-shadow: 2px 2px 4px #000; font-style: italic; position: absolute; left: 90px; top: 45px; width: 100%; } .info-slide-content.uvindex .weatherreadyheader { position: absolute; top: 72px; width: 100%; height: 109px; z-index: 2; } .info-slide-content.uvindex .weatherreadyheader .weatherreadyheaderbg { width: 100%; height: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 100%); } .info-slide-content.uvindex .weatherreadyheader .icon { position: absolute; left: 130px; top: 5.5px; width: 115px; height: 103px; background: url(/images/check.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .info-slide-content.uvindex .weatherreadyheader .weathertext { font-family: 'Frutiger'; width: 115px; height: 115px; position: absolute; left: 182.5px; top: 49px; font-weight: 600; font-style: italic; font-size: 62px; color: rgb(55, 73, 98); } .info-slide-content.uvindex .weatherreadyheader .weathertext2 { font-family: 'Frutiger LT'; width: 115px; height: 115px; position: absolute; left: 241px; top: 52px; font-weight: bold; font-size: 51.5px; transform: scale(99%,112%); transform-origin: bottom; font-style: italic; color: rgb(55, 73, 98); } .info-slide-content.uvindex .weatherreadyheader .readytext { font-family: 'Frutiger BQ'; width: 100px; height: 80px; position: absolute; left: 406px; top: 34px; font-size: 62px; transform: scale(109%,100%); color: rgb(223, 69, 65); } .info-slide-content.uvindex .thing { color: #fff; font-family: Frutiger; font-size: 30px; padding-top: 8px; text-shadow: 2px 2px 4px #000; height: 42.5px; width: 100%; padding-left: 37.5px; position: absolute; top: 181px; z-index: 2; } .info-slide-content.uvindex .thing .thingbg { position: absolute; right: 0; top: 0; background: #241e95; height: 42.5px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -440px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.uvindex .thing .currentlytext { font-size: 35px; transform: scale(106%,100%); transform-origin: left; } .info-slide-content.uvindex .thing .uvtime { font-size: 35px; position: absolute; top: 0; width: 137.5px; text-align: center; padding-top: 8px; } .info-slide-content.uvindex .thing .uvtime .uvday { font-size: 28.5px; position: absolute; width: 100%; top: 52px; transform: scale(107%,100%); } .info-slide-content.uvindex .thing .uvtime.i { left: 244px; } .info-slide-content.uvindex .thing .uvtime.ii { left: 404.5px; } .info-slide-content.uvindex .thing .uvtime.iii { left: 567.5px; } .info-slide-content.uvindex .frost-pane { z-index: 0; max-height: 292.75px; transform: translate(0,163.5px); } .info-slide-content.uvindex .frost-pane.currentuv { z-index: 0; max-width: 25%; background-position: -72px -482.5px; } .info-slide-content.uvindex .frost-pane.currentuv .bar { position: absolute; width: 137.5px; height: 0px; background-color: #fefd5d; background: linear-gradient(to top, #555968 0, #686a79 21px, #898a99 42px, #876f50 63px, #baa936 84px, #e9d940 105px, #dd901e 126px, #d45d35 141.75px, #c23b36 161px, #c14c90 173.25px); bottom: 17.5px; left: 45px; } .info-slide-content.uvindex .frost-pane.currentuv .bar .cat { font-size: 27px; position: absolute; top: 0; text-align: center; width: 100%; transform: scale(106%,100%); } .info-slide-content.uvindex .frost-pane.currentuv .bar .num { font-size: 50px; position: absolute; top: -50px; text-align: center; width: 100%; transform: scale(106%,100%); } .info-slide-content.uvindex .frost-pane.forecastuv { z-index: 0; margin-left: 5px; background-position: -293px -482.5px; } .info-slide-content.uvindex .frost-pane.forecastuv .bar { position: absolute; width: 135px; height: 60px; background-color: #fefd5d; background: linear-gradient(to top, #555968 0, #686a79 21px, #898a99 42px, #876f50 63px, #baa936 84px, #e9d940 105px, #dd901e 126px, #d45d35 141.75px, #c23b36 161px, #c14c90 173.25px); bottom: 15px; } .info-slide-content.uvindex .frost-pane.forecastuv .bar .cat { font-size: 27px; position: absolute; top: 1px; text-align: center; width: 100%; transform: scale(106%,100%); } .info-slide-content.uvindex .frost-pane.forecastuv .bar .num { font-size: 54px; position: absolute; top: -48px; text-align: center; width: 100%; transform: scale(107%,100%); } .info-slide-content.uvindex .frost-pane.forecastuv .bar.i { left: 21px; } .info-slide-content.uvindex .frost-pane.forecastuv .bar.ii { left: 182px; } .info-slide-content.uvindex .frost-pane.forecastuv .bar.iii { left: 345px; } .info-slide-content.uvindex .frost-pane.forecastuv .scalebar { position: absolute; width: 15px; height: 175px; background-color: #fefd5d; color: #d8c422; background: linear-gradient(to top, #555968 0, #686a79 12%, #898a99 24%, #876f50 36%, #baa936 48%, #e9d940 60%, #cb813f 72%, #d45d35 81%, #c23b36 92%, #c14c90 99%); bottom: 15px; left: 510px; } .info-slide-content.uvindex .frost-pane.forecastuv .scalebar .low { position: absolute; bottom: -5px; left: 16px; font-size: 27px; transform: scale(106%,100%); transform-origin: left; } .info-slide-content.uvindex .frost-pane.forecastuv .scalebar .mid { position: absolute; bottom: 40%; left: 16px; font-size: 27px; transform: scale(106%,100%); transform-origin: left; } .info-slide-content.uvindex .frost-pane.forecastuv .scalebar .high { position: absolute; top: 4px; left: 16px; font-size: 27px; transform: scale(106%,100%); transform-origin: left; } .info-slide-content.healthtip .weatherreadyheader { position: absolute; top: 70px; width: 100%; height: 111px; z-index: 2; } .info-slide-content.healthtip .weatherreadyheader .weatherreadyheaderbg { width: 100%; height: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -336px; -webkit-mask-size: 1064px 1174px; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 100%); } .info-slide-content.healthtip .weatherreadyheader .icon { position: absolute; left: 145px; top: 8.5px; width: 115px; height: 103px; background: url(/images/check.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; } .info-slide-content.healthtip .weatherreadyheader .weathertext { font-family: 'Frutiger'; width: 115px; height: 115px; position: absolute; left: 197.5px; top: 52px; font-weight: 600; font-style: italic; font-size: 62px; color: rgb(55, 73, 98); } .info-slide-content.healthtip .weatherreadyheader .weathertext2 { font-family: 'Frutiger LT'; width: 115px; height: 115px; position: absolute; left: 256px; top: 56.5px; font-weight: bold; font-size: 51.5px; transform: scale(99%,112%); transform-origin: bottom; font-style: italic; color: rgb(55, 73, 98); } .info-slide-content.healthtip .weatherreadyheader .readytext { font-family: 'Frutiger BQ'; width: 100px; height: 80px; position: absolute; left: 421px; top: 38.5px; font-size: 62px; transform: scale(109%,100%); color: rgb(223, 69, 65); } .info-slide-content.healthtip .frost-pane { font-family: 'Frutiger 57 Condensed'; z-index: 0; padding-top: 16.5px; padding-left: 59px; font-size: 34.5px; line-height: 115%; background-size: 1064px 1174px; background-position: -72px -447px; transform: translate(0,121px); } .info-slide-content.healthtip .frost-pane span { display: block; transform: scale(115%,100%); transform-origin: left; } .info-slide-content.moreinfoimage .frost-pane { background-color: rgba(0, 0, 0, 0); background: url(/images/newbg/health_promo.png); background-repeat: no-repeat; background-position: -19px 0; background-size: 955px 446px; } .info-slide-content.moreinfoimage .frost-pane .moreinfotext { font-size: 32px; line-height: 202%; transform: scale(107%,100%); transform-origin: right; text-align: right; position: absolute; top: 30px; right: 55px; } .info-slide-content.teetime { flex-direction: row } .info-slide-content.teetime .thing { height: 35px; width: 100%; position: absolute; top: 70px; } .info-slide-content.teetime .thing .thingbg { position: absolute; right: 0; top: 0; background: #2a3a8a; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.teetime .frost-pane { background-position: -72px -364px; max-height: 411.25px; padding-left: 55px; display: flex; flex-direction: row; transform: translate(0px, 45px); } .info-slide-content.teetime .hour { width: 110px; align-items: center; margin-right: 44px; } .info-slide-content.teetime .hour.v { margin-right: 100px; } .info-slide-content.teetime .hour .hourlabel { height: 35px; width: 120px; transform: translate(0px, -35px); } .info-slide-content.teetime .hour .hourlabel .thingtext { color: #fff; font-family: Frutiger; font-size: 32px; width: 120px; height: 100%; text-shadow: #000 1px 1px 3px; transform: translate(0px, 0px) scale(105.5%,100%); display: flex; align-items: center; justify-content: center; } .info-slide-content.teetime .daylabel { color: #fff; font-family: Frutiger; font-size: 27px; width: 120px; top: 5px; position: absolute; text-shadow: #000 1px 1px 3px; transform: translate(0px, 2.5px) scale(107%,100%); text-align: center; } .info-slide-content.teetime .tempbar { position: absolute; width: 120px; height: 200px; background-color: #fefd5d; background: linear-gradient(to top, #fffe21 0, #db5a14 100%); bottom: 17.5px } .info-slide-content.teetime .icon { width: 114px; height: 114px; background-repeat: no-repeat; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; margin-left: 3px; position: absolute; top: 38px } .info-slide-content.teetime .tempbar .temp { color: #fff; font-family: Frutiger; font-size: 59px; text-shadow: #000 2px 2px 2px; height: 30px; margin-top: 5px; width: 100%; text-align: center; transform: translate(0px, 15px); opacity: 1; transform: scale(101%,100%); } .info-slide-content.teetime .tempbar .wind { color: #24346f; position: absolute; font-family: Frutiger; font-size: 25px; text-shadow: #000 0px 0px 0px; height: 30px; width: 100%; text-align: center; bottom: 2.5px; opacity: 1; transform: scale(104.5%,100%); } .info-slide-content.golfforecast .thing { height: 35px; width: 100%; position: absolute; top: 70px; z-index: 388687; } .info-slide-content.golfforecast .thing .thingbg { position: absolute; right: 0; top: 0; background: #2a3a8a; height: 35px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.golfforecast .thing .thingtext { height: 35px; width: 100%; color: #fff; font-family: Frutiger; font-size: 33px; padding-top: 5px; padding-left: 57px; text-shadow: 2px 2px 4px #000; transform: scale(105%,100%); transform-origin: left; } .info-slide-content.golfforecast .frost-pane { max-height: 411.25px; transform: translate(0px, 45px); margin-left: 7px; } .info-slide-content.golfforecast .frost-pane.left { margin-left: 0px; max-width: 33%; padding-left: 31px; background-position: -72px -364px; } .info-slide-content.golfforecast .frost-pane.mid { max-width: 29.5%; background-position: -371px -364px; } .info-slide-content.golfforecast .frost-pane.right { width: 40%; background-position: -639px -364px; } .info-slide-content.golfforecast .frost-pane.left .purplefooter { width: 100%; position: absolute; bottom: 0; height: 122.5px; background: linear-gradient(to right, rgba(42, 58, 138, 0) 0, rgba(42, 58, 138, .281) 100%) } .info-slide-content.golfforecast .frost-pane.mid .purplefooter { width: 100%; position: absolute; bottom: 0; height: 122.5px; background: linear-gradient(to right, rgba(42, 58, 138, .287) 0, rgba(42, 58, 138, .534) 100%) } .info-slide-content.golfforecast .frost-pane.right .purplefooter { width: 100%; position: absolute; bottom: 0; height: 122.5px; background: linear-gradient(to right, rgba(42, 58, 138, .636) 0, rgba(42, 58, 138, .85) 100%) } .info-slide-content.golfforecast .forecontainer { position: absolute; width: 261px; height: 100%; } .info-slide-content.golfforecast .day { width: 100%; position: absolute; text-align: center; font-family: Frutiger; color: #d8c422; font-size: 30px; transform: scale(105%,100%); top: 14px; } .info-slide-content.golfforecast .icon { width: 179px; height: 179px; background-repeat: no-repeat; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; top: 36px; left: -8px; } .info-slide-content.golfforecast .forecontainer .high { position: absolute; font-family: Frutiger; font-size: 61px; top: 65px; left: 165px; transform: scale(101%,100%); } .info-slide-content.golfforecast .low { position: absolute; font-family: Frutiger; font-size: 61px; top: 134px; left: 165px; transform: scale(101%,100%); } .info-slide-content.golfforecast .wind { position: absolute; font-family: Frutiger; font-size: 41.5px; text-align: center; width: 100%; top: 245px; transform: scale(105%,100%); } .info-slide-content.golfforecast .golfindex { width: 100%; position: absolute; font-family: Frutiger; color: #d8c422; font-size: 29.5px; transform: scale(105.5%,100%); transform-origin: left; top: 305px; left: -8px; } .info-slide-content.golfforecast .bar { height: 25px; width: 205px; position: absolute; bottom: 10px; right: 25px; background: linear-gradient(to right, #59523c 2%, #9b8c33 20%, #ccca36 40%, #9fbc44 60%, #4ba824 80%, #49844d 99%); } .info-slide-content.golfforecast .bar .bararrow { position: absolute; bottom: -5px; left: -10px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 35px solid #fff; -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); } .info-slide-content.golfforecast .bar .bararrowtext { font-family: Frutiger; font-size: 30px; color: #fff; text-shadow: 0px 0px 0px; position: absolute; top: -66px; left: -79px; width: 150px; text-align: center; transform: scale(105%,100%); } .info-slide-content.golfmoreinfoimage .frost-pane { background-color: rgba(0, 0, 0, 0); background: url(/images/newbg/golf_promo.png); background-repeat: no-repeat; background-position: -19px 0; background-size: 958px 446px; } .info-slide-content.golfmoreinfoimage .frost-pane .moreinfotext { font-size: 33px; line-height: 202%; text-align: right; transform: scale(110%,100%); transform-origin: right; position: absolute; top: 25px; right: 55px; } .info-slide-content.gardenindex .thing { color: #fff; font-family: Frutiger; font-size: 33px; height: 40px; width: 100%; position: absolute; top: 65px; z-index: 388687; } .info-slide-content.gardenindex .thing .thingtext { width: 100%; color: #fff; font-family: Frutiger; font-size: 33px; text-shadow: 2px 2px 4px #000; transform: scale(105%,100%); padding-top: 5px; padding-left: 57px; transform-origin: left; } .info-slide-content.gardenindex .thing .thingbg { position: absolute; right: 0; top: 0; background: rgba(42, 58, 138, 1); height: 40px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -393px; -webkit-mask-size: 1065px 1385px; } .info-slide-content.gardenindex .frost-pane { max-height: 411.25px; transform: translate(0px, 45px); } .info-slide-content.gardenindex .frost-pane .title { width: 100%; font-size: 34px; padding-left: 10px; padding-bottom: 2px; padding-top: 4px; text-transform: none; height: 48px; font-family: 'Frutiger Bold Cn'; background: linear-gradient(to right, rgba(42, 58, 138, 1) 0, rgba(42, 58, 138, 0) 93%); transform: scale(104%,100%); transform-origin: left; } .info-slide-content.gardenindex .frost-pane.left { max-width: 41.5%; background-position: -72px -364px; } .info-slide-content.gardenindex .frost-pane.right { margin-left: 7px; background-position: -446px -364px; } .info-slide-content.gardenindex .frost-pane.left .forecastcontainer { width: 95%; height: 100%; position: absolute; left: 0; } .info-slide-content.gardenindex .frost-pane.left .icon { position: absolute; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; top: -12px; width: 180px; height: 180px; margin-left: 84px; } .info-slide-content.gardenindex .frost-pane.left .lowtitle { position: absolute; top: 177px; left: 72.5px; font-size: 23px; transform: scale(115%, 100%); transform-origin: left; } .info-slide-content.gardenindex .frost-pane.left .hightitle { position: absolute; top: 177px; right: 82.5px; font-size: 23px; transform: scale(115%, 100%); transform-origin: right; } .info-slide-content.gardenindex .frost-pane.left .low { width: 30%; position: absolute; top: 215px; left: 50px; font-size: 61px; transform: scale(101%, 100%); text-align: center; } .info-slide-content.gardenindex .frost-pane.left .high { width: 30%; height: 47.5%; position: absolute; top: 215px; right: 60px; font-size: 61px; transform: scale(101%, 100%); text-align: center; } .info-slide-content.gardenindex .frost-pane.left .precip { position: absolute; left: 20px; top: 270px; } .info-slide-content.gardenindex .frost-pane.left .precipvalue { position: absolute; left: 65px; bottom: 8px; font-size: 52px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.gardenindex .frost-pane.right .wateringindex { position: absolute; left: 40px; top: 5px; padding-left: 12.5px; } .info-slide-content.gardenindex .frost-pane.right .bar { position: absolute; top: 124px; left: 40px; height: 50px; width: 430px; } .info-slide-content.gardenindex .frost-pane.right .bar .barcat { -webkit-transform: translateZ(0); display: flex; width: 41px; height: 52.5px; justify-content: center; position: absolute; padding-top: 15px; font-size: 35px; margin: 0; } .info-slide-content.gardenindex .frost-pane.right .bar .barcat span { transform: scale(104.5%,100%); } .info-slide-content.gardenindex .frost-pane.right .bar .bararrow { position: absolute; bottom: 48px; left: 203px; width: 0; height: 0; border-left: 14.5px solid transparent; border-right: 14.5px solid transparent; border-top: 32px solid #fff; -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)) } .info-slide-content.gardenindex .frost-pane.right .bar .bararrowtext { font-family: Frutiger; font-size: 42px; color: #fff; text-shadow: 0px 0px 0px; position: absolute; top: 85px; left: -92px; width: 150px; text-align: center; transform: scale(104%,100%); transform-origin: center; } .info-slide-content.gardenindex .frost-pane.right .cloudcover { position: absolute; left: 45px; top: 270px; padding-left: 11px; } .info-slide-content.gardenindex .frost-pane.right .cloudcovervalue { position: absolute; left: 72.5px; bottom: 8px; font-size: 52px; transform: scale(103%, 100%); transform-origin: left; } .info-slide-content.gardenmoreinfoimage .frost-pane { background-color: rgba(0, 0, 0, 0); background: url(/images/newbg/garden_promo.png); background-repeat: no-repeat; background-position: -19px 0; background-size: 958px 451px; max-height: 446.25px; min-height: 446.25px; transform: translate(0, 5px); } .info-slide-content.gardenmoreinfoimage .frost-pane .moreinfotext { font-size: 32px; line-height: 202%; text-align: right; transform: scale(107%,100%); transform-origin: right; position: absolute; top: 25px; right: 55px; } .info-slide-content.skireport { flex-direction: column; } .info-slide-content.skireport .thing { height: 40px; width: 100%; z-index: 388687; } .info-slide-content.skireport .thing .thingbg { background: #241e95; height: 40px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.skireport .skilocation.ii .thing .thingbg { -webkit-mask-position: -72px -481.5px; } .info-slide-content.skireport .skilocation.iii .thing .thingbg { -webkit-mask-position: -72px -634px; } .info-slide-content.skireport .thing .thingtext { position: relative; top: -32px; color: #fff; font-family: Frutiger; font-size: 34px; padding-top: 0px; padding-left: 57px; height: 40px; width: 100%; transform: scale(105%,100%); transform-origin: left; text-shadow: #000 2px 2px 4px; } .info-slide-content.skireport .thing .thingtext .trails { font-size: 31px; position: absolute; display:block; right: 100px; top: 0px; text-align: right; } .info-slide-content.skireport .title { font-size: 26px; transform: scale(107%,100%); transform-origin: left; position: absolute; } .info-slide-content.skireport .newsnow { top: 10px; left: 64px; } .info-slide-content.skireport .basesnow { top: 10px; left: 310px; } .info-slide-content.skireport .value { font-size: 33px; width: 150px; transform: scale(106%,100%); text-align: center; position: absolute; } .info-slide-content.skireport .newsnowv { top: 51px; left: 63px; } .info-slide-content.skireport .basesnowv { top: 51px; left: 310px; } .info-slide-content.skireport .snowcondition { font-size: 33px; position: absolute; top: 51px; right: 52px; transform: scale(106%,100%); transform-origin: right; } .info-slide-content.skireport .skilocation { width: 100%; min-height: 150px; margin-top: 10px; } .info-slide-content.skireport .skilocation.i .frost-pane { height: 105px; background-position: -72px -369px; transform: translate(0,0); } .info-slide-content.skireport .skilocation.i { } .info-slide-content.skireport .skilocation.ii { margin-top: 2.5px; } .info-slide-content.skireport .skilocation.ii .frost-pane { height: 105px; background-position: -72px -521.5px; transform: translate(0,0); } .info-slide-content.skireport .skilocation.iii { margin-top: 2.5px; } .info-slide-content.skireport .skilocation.iii .frost-pane { height: 105px; background-position: -72px -674px; transform: translate(0,0); } .info-slide-content.destinationforecast { flex-direction: column; } .info-slide-content.destinationforecast .thing { position: absolute; top: 70px; height: 40px; width: 100%; z-index: 388687; } .info-slide-content.destinationforecast .thing .thingbg { background: #241e95; height: 52.5px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.destinationforecast .thing .thingtext { position: relative; top: -52.5px; color: #d8c422; font-family: Frutiger; font-size: 27px; padding-top: 17px; height: 52.5px; width: 100%; text-shadow: #000 2px 2px 4px; } .info-slide-content.destinationforecast .thing .thingtext .daytitle.i{ position: absolute; display: block; left: 405px; width: 70px; text-align: left; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.destinationforecast .thing .thingtext .daytitle.ii{ position: absolute; display: block; left: 574px; width: 70px; text-align: left; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.destinationforecast .thing .thingtext .daytitle.iii{ position: absolute; display: block; left: 747.5px; width: 70px; text-align: left; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.destinationforecast .frost-pane { margin-top: 52.5px; max-height: 125px; width: 100%; } .info-slide-content.destinationforecast .frost-pane .cityname { position: absolute; top: 47.5px; font-size: 36.5px; transform: scale(103.5%,100%); transform-origin: left; } .info-slide-content.destinationforecast .frost-pane.toploc .cityname { left: 25px; } .info-slide-content.destinationforecast .frost-pane.midloc .cityname { left: 11.5px; top: 46px; } .info-slide-content.destinationforecast .frost-pane.botloc .cityname { left: 24.5px; top: 46px; } .info-slide-content.destinationforecast .day { position: absolute; height: 100%; width: 200px; } .info-slide-content.destinationforecast .day.i { right: 382.5px; } .info-slide-content.destinationforecast .day.ii { right: 206.75px; } .info-slide-content.destinationforecast .day.iii { right: 31px; } .info-slide-content.destinationforecast .hightemp { font-family: 'Frutiger 57 Condensed'; font-size: 41px; position: absolute; top: 20px; right: 0; width: 60px; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.destinationforecast .midloc .hightemp { top: 24px; } .info-slide-content.destinationforecast .botloc .hightemp { top: 19px; } .info-slide-content.destinationforecast .lowtemp { font-family: 'Frutiger 57 Condensed'; font-size: 41px; position: absolute; top: 68px; right: 0; width: 60px; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.destinationforecast .botloc .lowtemp { top: 65px; } .info-slide-content.destinationforecast .day .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 117px; width: 117px; margin-top: 4px; left: 26.5px; position: absolute; } .info-slide-content.destinationforecast .botloc .icon { margin-top: 0.75px; } .info-slide-content.destinationforecast .frost-pane.toploc { background-position: -72px -381.5px; margin-top: 52.5px; } .info-slide-content.destinationforecast .frost-pane.midloc { background-position: -72px -516.5px; margin-top: 10px; } .info-slide-content.destinationforecast .frost-pane.botloc { margin-top: 10px; min-height: 124px; max-height: 124px; background-position: -72px -646.5px; } .info-slide-content.internationalforecast { flex-direction: column; } .info-slide-content.internationalforecast .thing { position: absolute; top: 70px; height: 40px; width: 100%; z-index: 388687; } .info-slide-content.internationalforecast .thing .thingbg { background: #241e95; height: 52.5px; width: 100%; -webkit-mask-image: url(/images/newbg/frostpane.svg); -webkit-mask-position: -72px -329px; -webkit-mask-size: 1065px 1164px; } .info-slide-content.internationalforecast .thing .thingtext { position: relative; top: -52.5px; color: #d8c422; font-family: Frutiger; font-size: 27px; padding-top: 17px; height: 52.5px; width: 100%; text-shadow: #000 2px 2px 4px; } .info-slide-content.internationalforecast .thing .thingtext .daytitle.i{ position: absolute; display: block; left: 405px; width: 70px; text-align: left; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.internationalforecast .thing .thingtext .daytitle.ii{ position: absolute; display: block; left: 574px; width: 70px; text-align: left; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.internationalforecast .thing .thingtext .daytitle.iii{ position: absolute; display: block; left: 747.5px; width: 70px; text-align: left; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.internationalforecast .frost-pane { margin-top: 52.5px; max-height: 125px; width: 100%; } .info-slide-content.internationalforecast .frost-pane .cityname { position: absolute; top: 47.5px; font-size: 36.5px; transform: scale(103.5%,100%); transform-origin: left; } .info-slide-content.internationalforecast .frost-pane.toploc .cityname { left: 24px; top: 49px; } .info-slide-content.internationalforecast .frost-pane.midloc .cityname { left: 11.5px; top: 48px; } .info-slide-content.internationalforecast .frost-pane.botloc .cityname { left: 24.5px; top: 48.5px; } .info-slide-content.internationalforecast .day { position: absolute; height: 100%; width: 200px; } .info-slide-content.internationalforecast .day.i { right: 382.5px; } .info-slide-content.internationalforecast .day.ii { right: 206.75px; } .info-slide-content.internationalforecast .day.iii { right: 31px; } .info-slide-content.internationalforecast .hightemp { font-family: 'Frutiger 57 Condensed'; font-size: 41px; position: absolute; top: 20px; right: 0; width: 60px; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.internationalforecast .midloc .hightemp { top: 24px; } .info-slide-content.internationalforecast .botloc .hightemp { top: 19px; } .info-slide-content.internationalforecast .lowtemp { font-family: 'Frutiger 57 Condensed'; font-size: 41px; position: absolute; top: 68px; right: 0; width: 60px; transform: scale(104%,100%); transform-origin: left; } .info-slide-content.internationalforecast .botloc .lowtemp { top: 65px; } .info-slide-content.internationalforecast .day .icon { background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 77.5%; height: 117px; width: 117px; margin-top: 4px; left: 26.5px; position: absolute; } .info-slide-content.internationalforecast .botloc .icon { margin-top: 0.75px; } .info-slide-content.internationalforecast .frost-pane.toploc { background-position: -72px -381.5px; margin-top: 52.5px; } .info-slide-content.internationalforecast .frost-pane.midloc { background-position: -72px -516.5px; margin-top: 10px; } .info-slide-content.internationalforecast .frost-pane.botloc { margin-top: 10px; min-height: 124px; max-height: 124px; background-position: -72px -646.5px; } .bulletin .frost-pane { background: url(/images/newbg/bulletinfrostpane.svg); background-position: -72px -329px; background-repeat: no-repeat; background-size: 1065px 1164px; z-index: 1; margin-top: 60px; } .bulletin .cityname { font-family: Frutiger; color: #d8c422; font-size: 36px; position: absolute; left: 50px; top: 16px; transform: scale(105%,100%); transform-origin: left; } .bulletin .warnings { font-family: 'Frutiger 57 condensed'; transform: scale(112.5%,100%); transform-origin: left; color: #fff; font-size: 40px; position: absolute; left: 50px; top: 62.5px; line-height: 125%; padding-right: 10px; font-stretch: condensed; white-space: pre; } a, body, div, h1, html, p { margin: 0; padding: 0; font-family: Frutiger, "ZemestroSTD", Sans-Serif; font-weight: 400; font-style: normal; -webkit-font-smoothing: subpixel-antialiased; } html * { box-sizing: border-box; font-size: 100% } body, html { height: 100%; background-color: #000; font-size: 100% } #main { position: relative; top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%); width: 1440px; height: 1080px; will-change: transform; } #startup { position: relative; top: 50%; left: 50%; overflow: hidden; background-color: rgb(255, 255, 255); transform: translate(-50%, -50%); width: 1440px; height: 1080px } .logocontainer { position: absolute; bottom: 10px; } .intellistarlogo { object-fit: contain; object-position: center; width: 625px; height: 205px; display: block; margin: 0px auto; margin-top: 440px; } .blackbar { height: 23.5%; width: 100%; position: absolute; bottom: 0; background-color: #161418; } .blackbar .introtext { position: absolute; width: 400px; left: 8.05%; top: 4.6%; display: flex; flex-direction: row; flex-direction: column; } .blackbar .introtext .introtext { white-space: nowrap; position: relative; font-family: Frutiger; font-weight: 600; color: #d8c422; font-size: 31.5px; letter-spacing: 1px; padding-top: 6px; } #savebutton { position: absolute; top: 170px; font-family: Frutiger; font-weight: 600; color: #d8c422; font-size: 38px; letter-spacing: 1px; padding-top: 6px; } .blackbar .twclogo { object-fit: contain; position: absolute; width: 500px; height: 175px; right: 1.9%; top: -9px; } .settingspanetitle { position: absolute; width: 100%; text-align: center; font-size: 56px; top: 16px; } .settingspane{ padding-top: 200px; } input{ display: block; position: relative; margin: auto; border-radius: 0px; border-style: double; width: 200px; margin: 15px; padding: 5px; } select{ display: block; position: relative; margin: auto; border-radius: 0px; border-style: double; width: 200px; margin: 15px; padding: 5px; } label{ font-size: 20px; width: 20px; text-align: center; } #searchbar { position: absolute; top: 100px; left: 50%; transform: translate(-125%,0); margin: auto 0px; text-align: center; z-index: 99; } #searchoption { position: absolute; top: 118px; right: 50%; transform: translate(40%,0); margin: auto 0px; text-align: center; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { /*when hovering an item:*/ background-color: #e9e9e9; } .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: DodgerBlue !important; color: #ffffff; } #displayname { position: absolute; top: 100px; right: 50%; transform: translate(130%,0); margin: auto 0px; text-align: center; } #searchoption select{ width: 100px; } #addlocationbuttons { position: absolute; top: 180px; right: 50%; transform: translate(50%,0); margin: auto 0px; text-align: center; font-size: 18px; } .locationheader { font-size: 32px; padding-left: 50px; padding-top: 15px; padding-bottom: 15px; } .locationheader button{ font-size: 20px; } #mainlocation { position: relative; margin-left: 50px; border: solid; width: 200px; height: 150px; font-size: 28px; text-align: center; font-size: 18px; } #extralocations { display: flex; position: absolute; top: 260px; left: 350px; } .extralocation { border: solid; height: 150px; font-size: 28px; text-align: center; font-size: 18px; margin-right: 50px; } #City8SlideLocations { overflow: auto; display: flex; position: absolute; width: 1400px; top: 475px; left: 50px; } .eightslideloc { border: solid; height: 150px; flex-grow: 0; flex-shrink: 0; flex-basis: 200px; margin-right: 50px; font-size: 28px; text-align: center; font-size: 18px; } #cctickerheader { position: absolute; top: 617px; } #cctickerlocations { overflow: auto; display: flex; position: absolute; top: 675px; left: 50px; width: 1400px; } .cctickerloc { border: solid; height: 150px; flex-grow: 0; flex-shrink: 0; flex-basis: 200px; margin-right: 50px; font-size: 28px; text-align: center; font-size: 18px; } #pageleft { position: absolute; font-size: 125px; top: 30%; left: 10px; margin: auto, 0px; } #pageright { position: absolute; font-size: 125px; top: 30%; right: 10px; margin: auto, 0px; } .weathersettingspagetitle { position: absolute; width: 100%; text-align: center; font-size: 42px; top: 84px; } .setlocname { position: absolute; right: 100px; text-align: center; top: 84px; width: 227px; } .selectloc { position: absolute; left: 100px; text-align: center; top: 84px; width: 227px; } .weathersettingspage form{ position: relative; display: block; height: 400px; width: 460px; margin: auto auto; display: flex; flex-direction: row; flex-wrap: wrap; text-align: center; font-size: 20px; } #daypartpage { display: flex; justify-content: center; } #daypartpage .hour{ text-align: center; } #daypartpage .sethourtitle{ text-align: center; font-size: 24px } #main>#template { display: block; max-height: 100%; max-width: 100% } .leaflet-bottom, .leaflet-top { display: none } #info-slides-container { position: absolute; right: 75px; top: 92px; width: 887px; height: 569px; max-height: 569px; z-index: 1; padding: 2.5px 0 2.5px 2.5px; } #info-slides-bg { position: absolute; right: 75px; top: 92px; width: 963px; height: 569px; z-index: 1; padding: 2.5px 0 2.5px 2.5px; margin-right: -75px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .35); background-color: #001668; background: radial-gradient(farthest-corner at 963px 569px, #000d28, #001668) } .info-slides-header, .info-slide .info-subheader { position: relative; color: #fff; width: 100%; padding: 0 7.5px } .info-slides-header { position: absolute; top: 2.5px; left: 2.5px; background-color: #2267b7; height: 42.5px; font-size: 31px; white-space: nowrap; min-width: 125%; overflow: hidden; } .info-slides-header .hscroller { position: relative; display: inline-block; transform-origin: left center; top: 50%; transform: scale(106%, 100%) translateY(-50%); line-height: 23.5px; font-family: Interstate; font-size: 30px; } .info-slides-header .gradientthing { position: absolute; width: 125px; top: 0; background: linear-gradient(to right, rgba(147, 156, 171,0), rgba(147, 156, 171,.97)); height: 100%; right: 125px } .info-slides-header .divider-arrow { font-size: 26px; display: inline-block; transform: scale(1, 1.05) translate(0, -2.5px);; transform-origin: left center; font-weight: 700; padding: 0 7px } .info-slides-header span.city { text-transform: uppercase; display: inline-block; } .info-slides-header span.city, .info-slides-header span.divider-arrow { opacity: .5 } .info-slides-header span.city.current { opacity: 1 } #info-slide-container { position: absolute; top: 45px; height: 520.82px; width: 884.5px; } #radar-container { display: flex; flex-direction: column; overflow: hidden; } .radar-overlay { position: absolute; right:0; width: 884.5px; height: 520.82px; z-index: 4; background: transparent url(/images/newbg/map_banner_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .mapcon { flex: 1; } #radar-1 { position: absolute; width: 884.5px; height: 460.8px; } #radar-2 { position: absolute; width: 884.5px; height: 460.8px; } #radar-3 { position: absolute; width: 884.5px; height: 460.8px; } #satrad-1 { position: absolute; width: 884.5px; height: 460.8px; } #minimap-1 { position: absolute; width: 451.5px; height: 222px; overflow: hidden; } #minimap-2 { position: absolute; width: 451.5px; height: 222px; } #minimap-3 { position: absolute; width: 451.5px; height: 222px; } .info-slide { min-width: 885px; max-width: 885px; min-height: 521px; max-height: 521px; position: absolute; top: 0px; overflow: hidden; display: flex; flex-flow: column; z-index: 5 } .preload { z-index: 4 } .info-slide .info-subheader { font-family: 'Frutiger 57 Condensed'; display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 39px; height: 60px; z-index: 4; text-shadow: 2px 2px 3px #000; line-height: 24.5px; } .bulletin .info-subheader { font-family: 'Frutiger Bold Cn'; display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 40.5px; height: 60px; text-shadow: 2px 2px 5px #000; position: absolute; min-width: 20%; transform: scale(102.5%,100%); transform-origin: left; } .info-slide .info-subheader span { position: absolute; top: 50%; transform: translateY(-42.5%) } .subhead-title { position: absolute; top: 50%; transform: translateY(-42.5%) scale(118%,100%) !important; transform-origin: left; } .info-slide-content br { position: relative !important } .city-info-slidetest { position: relative; background: transparent url(/images/newbg/core_bgreference.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .city-info-slide .info-subheader { padding-right: 10%; } .city-info-slide { background: transparent url(/images/newbg/core_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .severe-city-info-slide { background: transparent url(/images/newbg/severe_core_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .city-info-slide .info-subheader { padding-right: 10% } .city-info-slide #subhead-city { font-size: 28px; padding-top: 3px; right: 98px; font-stretch: semi-expanded; } .severe-city-info-slide .info-subheader { padding-right: 10% } .severe-city-info-slide #subhead-city { font-size: 28px; padding-top: 3px; right: 98px; font-stretch: semi-expanded; } .info-slide-content { height: 100%; min-height: 100%; width: 100%; flex: 1; z-index: 0 } .info-slide .curve { position: absolute; background-position: 0 0; background-repeat: no-repeat; background-size: 200% 200% } @keyframes accentmovei { 100% {transform: translate(-.75%, -4.5%) scaleY(1.03);} } .info-slide .accent.i { background-color: #7596d2; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; -webkit-mask-position:100% 0; mask-size:200% 100%; mask-position:100% 0; width:40%; height:128.5%; top:-16.3%; right:-11.2%; animation: accentmovei 5s linear normal forwards; z-index: 6; } @keyframes accentmoveii { 100% {transform: translate(-.75%, -4.5%) scaleY(1.03);} } .info-slide .accent.ii { background-color: #6b91d7; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; -webkit-mask-position:100% 0; mask-size:200% 100%; mask-position:100% 0; width:55%; height:131%; top:-13.5%; right:-13.75%; opacity: .7; z-index: 5; animation: accentmoveii 5s linear normal forwards; } @keyframes accentmoveiii { 100% {transform: translate(1%, -4.5%);} } .info-slide .accent.iii { background-color: #6b91d7; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; -webkit-mask-position:100% 0; mask-size:200% 100%; mask-position:100% 0; width:55%; height:172.4%; top:-12.25%; right:-29.75%; opacity: .7; animation: accentmoveiii 5s linear normal forwards; z-index: 7; } @keyframes accentmoveiv { 100% {transform: translate(1%, -.75%);} } .info-slide .accent.iv { background-color: #6b8bc1; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:67.5%; height:172.5%; top:-6.7%; left:-17.8%; opacity: .7; animation: accentmoveiv 5s linear normal forwards; } @keyframes accentmovev { 100% {transform: translate(2%, -2.55%);} } .info-slide .accent.v { background-color: #5d88e4; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:72.5%; height:187.5%; top:-12.5%; left:-24.25%; animation: accentmovev 5s linear normal forwards; } @keyframes accentmovevi { 100% {transform: translate(4.2%, -.01%);} } .info-slide .accent.vi { background-color: #5d88e4; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:72.5%; height:187.5%; top:-17.8%; left:-26.3%; animation: accentmovevi 5s linear normal forwards; } .info-slide .accentviishadow { background-image: url(/images/airport-curve.svg); background-size: 200% 100%; width:72.5%; height:227.5%; top:-47.25%; left:-20.85%; -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .65)); filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); } .info-slide .accentvii { background-color: #6c8bbf; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:72.5%; height:227.5%; top:-47.25%; left:-20.85%; z-index: 100; } @keyframes accentmoveviii { 100% {transform: translate(1.5%, 5.75%);} } .info-slide .accent.viii { background-color: #5d88e4; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:57.5%; height:157.5%; bottom:-22.25%; left:-20.25%; opacity: 0; z-index: 5; animation: accentmoveviii 5s linear normal forwards; } @keyframes accentmoveix { 100% {transform: translate(-2.8%, 8%);} } .info-slide .accent.ix { background-color: #6b8bc1; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 200%; mask-size:200% 200%; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; width:67.5%; height:80.5%; bottom: -38.7%; left: -16.8%; opacity: .7; z-index: 4; animation: accentmoveix 5s linear normal forwards; } .info-slide .segment { color: #fff; font-family: 'Frutiger 57 Condensed'; font-size: 53px; text-shadow: #000 2px 2px 2px; position: absolute; text-align: left; right: 122.5px; bottom: 70px; transform: scale(129%,100%); transform-origin: right; } @keyframes marqueeweatherscan { 0% {transform: translate(0, 0);} 100% {transform: translate(20%, 0);} } .info-slide .weatherscanmarquee { color: #fff; font-family: Frutiger; font-size: 18px; opacity: .5; position: absolute; text-align: right; bottom: 4.45px; right: 0px; display: inline-block; width: auto; white-space: nowrap; overflow: hidden; word-spacing: 3.725px; animation: marqueeweatherscan 5.5s linear normal forwards; z-index: 20; } .info-slide .weatherscanmarquee span { display: block; transform: scale(106%,100%); } .airport-slide-intro { background: transparent url(/images/newbg/airport_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .health-slide-intro { background: transparent url(/images/newbg/health_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .health-slide-intro .accent.i { background-color: #189cc5; } .health-slide-intro .accent.ii { background-color: #588fe8; } .health-slide-intro .accent.iii { background-color: #189cc5; } .health-slide-intro .accent.iv { background-color: #189cc5; } .health-slide-intro .accent.v { background-color: #14a4bd; } .health-slide-intro .accent.vi { background-color: #189cc5; } .health-slide-intro .accentvii { background-color: #14a4bd; } .health-slide-intro .accent.viii { background-color: #588fe8; } .health-slide-intro .accent.ix { background-color: #189cc5; } .beach-slide-intro { background: transparent url(/images/newbg/boatbeach_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .beach-slide-intro .accent.i { background-color: #218912; } .beach-slide-intro .accent.ii { background-color: #8dcd5a; opacity: 100%; } .beach-slide-intro .accent.iii { background-color: #145b23; } .beach-slide-intro .accent.iv { background-color: #12780d; opacity: .3; } .beach-slide-intro .accent.v { background-color: #145b23; } .beach-slide-intro .accent.vi { background-color: #2d7816; } .beach-slide-intro .accentvii { background-color: #137f0d; } .beach-slide-intro .accent.viii { background-color: #8dcd5a; opacity: 100%; } .beach-slide-intro .accent.ix { background-color: #12780d; opacity: .3; } .golf-slide-intro { background: transparent url(/images/newbg/boatbeach_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .golf-slide-intro .accent.i { background-color: #218912; } .golf-slide-intro .accent.ii { background-color: #8dcd5a; opacity: 100%; } .golf-slide-intro .accent.iii { background-color: #145b23; } .golf-slide-intro .accent.iv { background-color: #12780d; opacity: .3; } .golf-slide-intro .accent.v { background-color: #145b23; } .golf-slide-intro .accent.vi { background-color: #2d7816; } .golf-slide-intro .accentvii { background-color: #137f0d; } .golf-slide-intro .accent.viii { background-color: #8dcd5a; opacity: 100%; } .golf-slide-intro .accent.ix { background-color: #12780d; opacity: .3; } .garden-slide-intro { background: transparent url(/images/newbg/garden_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .garden-slide-intro .accent.i { background-color: #218912; } .garden-slide-intro .accent.ii { background-color: #8dcd5a; opacity: 100%; } .garden-slide-intro .accent.iii { background-color: #145b23; } .garden-slide-intro .accent.iv { background-color: #12780d; opacity: .3; } .garden-slide-intro .accent.v { background-color: #145b23; } .garden-slide-intro .accent.vi { background-color: #2d7816; } .garden-slide-intro .accentvii { background-color: #137f0d; } .garden-slide-intro .accent.viii { background-color: #8dcd5a; opacity: 100%; } .garden-slide-intro .accent.ix { background-color: #12780d; opacity: .3; } .ski-slide-intro { background: transparent url(/images/newbg/ski_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .ski-slide-intro .accent.i { background-color: #9e59a2; } .ski-slide-intro .accent.ii { background-color: #8d5895; opacity: 100%; } .ski-slide-intro .accent.iii { background-color: #885b99; } .ski-slide-intro .accent.iv { background-color: #7847a2; opacity: .5; } .ski-slide-intro .accent.v { background-color: #925d92; } .ski-slide-intro .accent.vi { background-color: #9e59a2; } .ski-slide-intro .accentvii { background-color: #a775a6; } .ski-slide-intro .accent.viii { background-color: #885b99; opacity: 100%; } .ski-slide-intro .accent.ix { background-color: #7847a2; opacity: .5; } .travel-slide-intro { background: transparent url(/images/newbg/travel_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .international-slide-intro { background: transparent url(/images/newbg/international_intro_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .international-slide-intro .accent.i { background-color: #909294; } .international-slide-intro .accent.ii { background-color: #909294; } .international-slide-intro .accent.iii { background-color: #9fa1a3; } .international-slide-intro .accent.iv { background-color: #909294; opacity: .5; } .international-slide-intro .accent.v { background-color: #9fa1a3; opacity: .6; } .international-slide-intro .accent.vi { background-color: #909294; } .international-slide-intro .accentvii { background-color: #9fa1a3; } .international-slide-intro .accent.viii { background-color: #909294; opacity: 100%; } .international-slide-intro .accent.ix { background-color: #909294; } .city-slide-intro .segment { color: #fff; font-family: Frutiger; font-size: 57.5px; text-shadow: #000 0px 0px 0px; position: absolute; text-align: left; left: 140px; bottom: 38px; transform: scale(106.5%,100%); transform-origin: left; } @keyframes citymarqueeweatherscan { 0% {transform: translate(0, 0);} 100% {transform: translate(40%, 0);} } .city-slide-intro .cityweatherscanmarquee { color: #fff; font-family: Frutiger; font-size: 25px; opacity: .5; position: absolute; text-align: right; bottom: 12.5px; right: 0px; display: inline-block; width: auto; white-space: nowrap; overflow: hidden; word-spacing: 15px; animation: citymarqueeweatherscan 10.5s linear normal forwards; } .city-slide-intro .cityweatherscanmarquee span { display: block; transform: scale(106%,100%); } .city-slide-intro { background: transparent url(/images/newbg/city_bg.png) no-repeat bottom; background-size: 1068px 788px; background-position: -127px -112px; } .city-slide-intro .weatherscancopyright { color: #fff; font-family: Frutiger; font-size: 28px; background-color: #000000; background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); height: 105px; width: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; padding-left: 11px; padding-right: 10px; padding-top: 10px; line-height: 110%; z-index: 101 } .city-slide-intro .weatherscancopyright span{ display: block; transform: scale(107%,100%); transform-origin: left; } @keyframes cityaccentmovei { 35% {transform: translate(-.75%, -4.5%) scaleY(1.03);} 100% {transform: translate(-8.75%, -12%) scale(1.15, 1.2);} } .info-slide .cityaccent.i { background-color: #e5be45; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; -webkit-mask-position:100% 0; mask-size:200% 100%; mask-position:100% 0; width:40%; height:128.5%; top:-16.3%; right:-11.2%; opacity: .8; animation: cityaccentmovei 10s linear normal forwards; } @keyframes cityaccentmoveii { 35% {transform: translate(-.75%, -4.5%) scaleY(1.03);} 100% {transform: translate(-8.15%, -10.15%) scale(1.15, 1.2);} } .info-slide .cityaccent.ii { background-color: #001782; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; -webkit-mask-position:100% 0; mask-size:200% 100%; mask-position:100% 0; width:55%; height:131%; top:-13.5%; right:-13.75%; opacity: .5; animation: cityaccentmoveii 10s linear normal forwards; } @keyframes cityaccentmoveiii { 100% {transform: translate(1%, -4.5%);} } .info-slide .cityaccent.iii { background-color: #e5be45; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; -webkit-mask-position:100% 0; mask-size:200% 100%; mask-position:100% 0; width:55%; height:172.4%; top:-12.25%; right:-29.75%; animation: cityaccentmoveiii 5s linear normal forwards; } @keyframes cityaccentmoveix { 30% {transform: translate(0, 0);} 100% {transform: translate(-18.75%, -8.8%);} } .info-slide .cityaccent.ix { background-color: #e5be45; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; -webkit-mask-position:100% 0; mask-size:200% 100%; mask-position:100% 0; width:55%; height:210.4%; bottom:-38.25%; right:-25.75%; animation: cityaccentmoveix 10s linear normal forwards; } @keyframes cityaccentmoveiv { 0% {transform: translate(0, 0);} 100% {transform: translate(4.5%, 8%);} } .info-slide .cityaccent.iv { background-color: #001782; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:67.5%; height:202.5%; top:-31.45%; left:-22%; opacity: .5; animation: cityaccentmoveiv 10s linear normal forwards; } @keyframes cityaccentmovev { 100% {transform: translate(6.125%, -11.3%);} } .info-slide .cityaccent.v { background-color: #e5be45; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:72.5%; height:210.5%; top:-12.5%; left:-24.25%; opacity: .7; animation: cityaccentmovev 10s linear normal forwards; } .info-slide .cityaccentviishadow { background-image: url(/images/airport-curve.svg); background-size: 200% 100%; width:72.5%; height:227.5%; top:-47.25%; left:-20.85%; -webkit-filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .65)); filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75)); } .info-slide .cityaccentvii { background-color: #e5be45; -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; width:72.5%; height:227.5%; top:-47.25%; left:-20.85%; z-index: 100; } @keyframes cityaccentmoveviii { 100% {transform: translate(-1.7%, 9.5%);} } .info-slide .cityaccent.viii { background-color: #001782 -webkit-mask-image: url(/images/airport-curve.svg); mask-image: url(/images/airport-curve.svg); -webkit-mask-size:200% 100%; mask-size:200% 100%; -webkit-mask-position: 0 100%; width:57.5%; height:157.5%; bottom:-22.25%; left:-20.25%; opacity: .3; animation: cityaccentmoveviii 10s linear normal forwards; } .airport-slide { background: transparent url(/images/newbg/airport_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .beach-slide { background: transparent url(/images/newbg/boatbeach_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .health { background: transparent url(/images/newbg/health_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .golf { background: transparent url(/images/newbg/golf_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .garden { background: transparent url(/images/newbg/garden_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .ski { background: transparent url(/images/newbg/ski_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .travel { background: transparent url(/images/newbg/travel_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .international { background: transparent url(/images/newbg/international_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .radar-color-legend { display: block; font-size: 24px; position: absolute; text-align: right; right: 4%; top: 1.2%; transform: translateY(-42.5%) scale(112%,100%) !important; transform-origin: right; } .radar-color-legend-winter { display: block; right: 0%; top: 1.2%; transform: translateY(-42.5%) scale(112%,100%) !important; transform-origin: right; } .pastlegend { font-size: 26px; transform: translate(0,-2.5px) scale(92.5%,100%); transform-origin: right; } .radar-legends { display: flex; align-items: right; font-size: 24px; width: 360px; position: absolute; text-align: right; right: 5%; top: 55%; } .radar-color-legend-winter>img { width: 35px; height: 16px; }.radar-color-legend-winter .rainlonger { width: 67.5px; height: 16px; } .radar-color-legend>img { box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 1); width: 44%; height: 16px; transform: scale(100%,100%); } .leaflet-overlay-pane canvas { -webkit-filter: drop-shadow(0 2px 2px #000); filter: drop-shadow(0 2px 2px #000) } .radarTile { filter: drop-shadow(3px 3px 0px #000); } #city, #current-conditions *, #date-time, #date-time * { font-family: Interstate; font-weight: 700; text-shadow: none; text-align: right; color: #171717; } #date-time { position: absolute; top: 101px; width: 458px } #date-time * { font-family: 'Interstate Mono'; font-size: 28px; line-height: 40px } #time { text-transform: lowercase } #city { font-family: Interstate; font-weight: 600; font-size: 36.5px; padding-top: 10px; position: absolute; text-align: left; margin-left: 142px; width: 311px; height: 92px; top: 284px; left: 0; line-height: 110%; display: flex; align-items: center; transform: scale(103%,100%); transform-origin: left; } #current-conditions { font-family: Interstate; position: absolute; top: 376px; left: 0; height: 221px; width: 452px; text-align: left; z-index: 4; } #conditions-icon { position: absolute; left: 294px; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 8.1% 77.5%; width: 155px; height: 155px; background-repeat: no-repeat; top: 390px; z-index: 0 } #now { font-size: 46px; position: absolute; top: 12.5px; left: 145px; letter-spacing: 2px; text-align: left; transform: scale(105%,100%); transform-origin: left; } #nowwide { font-size: 46px; position: absolute; top: 12.5px; left: 146px; letter-spacing: 2px; text-align: left; transform: scale(105%,100%); transform-origin: left; } #current-temp { font-size: 69px; position: absolute; top: 88px; left: -12.5px; text-align: center; width: 100%; transform: scale(102.5%,100%); transform-origin: left; } #current-info { font-family: 'PressureArrow', Interstate; font-size: 31px; position: absolute; left: 145px; top: 177px; text-align: left; width: 62.5%; font-weight: 400; line-height: 117.5%; transform: scale(106%,100%); transform-origin: left; white-space: normal; } #current-info-severe { font-family: 'PressureArrow', Interstate; font-size: 31px; position: absolute; left: 145px; top: 177px; text-align: left; width: 66%; font-weight: 400; line-height: 117.5%; transform: scale(106%,100%); transform-origin: left; } #current-info-details { font-size: 31px; position: absolute; left: 145px; top: 263px; text-align: left; width: 66%; font-weight: 400; line-height: 182.5%; transform: scale(106%,100%); transform-origin: left; } #current-noreport { font-family: 'Interstate2'; font-weight: 600; font-size: 44px; position: absolute; top: 45%; left: 32.4%; text-align: left; width: 66%; line-height: 100%; letter-spacing: 1.4px; transform: scale(110%,100%); text-shadow: .5px 0px #171717; transform-origin: left; } #minimap-cover { position: absolute; width: 31.35%; top: 600.5px; height: 27.6%; background-image: url(/images/blueradarcover.png); background-repeat: no-repeat; background-size: 100% 100%; z-index: 10; } #minimap-cover .gradient1 { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(to top, rgba(239, 245, 252, 1) 0%, rgba(234, 240, 247, .4) 60%, rgba(234, 240, 247, 0) 100%) } #minimap-cover .gradient2 { width: 350px; height: 300px; position: absolute; bottom: 0; left: 0; background: radial-gradient(at bottom left, rgba(239, 245, 252, 1) 5%, rgba(234, 240, 247, .4) 50%, rgba(234, 240, 247, 0) 70%) } #minimap-cover .gradient3 { width: 225px; height: 200px; position: absolute; bottom: 0; right: 0; background: radial-gradient(at bottom right, rgba(242, 248, 255, 1) 1%, rgba(234, 240, 247, .4) 40%, rgba(234, 240, 247, 0) 70%) } #minimap-title { font-family: Interstate; font-weight: 700; position: absolute; width: 451.5px; height: 41px; left:0; top: 637px; text-align: right; color: #D4D4D4; font-size: 23.5px; padding: 07px 14px 0 0; text-shadow: 2px 2px 4px #000; line-height: 125%; z-index: 5; background: linear-gradient(to right, #3f3f3f 0, #242424 100%); } #minimap-title span { display: block; transform: scale(105.25%,100%); transform-origin: right; } #minimap { position: absolute; width: 451.5px; height: 222px; left: 0; top: 677px; background: #333; z-index: 5; box-shadow: 0 8px 15px 0 rgba(0, 0, 0, .35) } #forecast-shadow { position: absolute; height: 18.6%; width: 66.87%; right: 0; top: 63.05%; background: #8cadd1; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .35) } .forecast-header { width: 100%; min-height: 21.25%; max-height: 21.25%; font-size: 29px; padding-left: 0.95%; background: #eed76b } .forecast-header * { font-family: Interstate; font-weight: 700; text-transform: uppercase; display: inline-block; line-height: 164%; } #hourlyheader { line-height: 182%; transform: translate(0, -2px); } #forecast-city { padding-right: 3%; transform: scale(105.5%,100%); transform-origin: left; } #forecast-title { color: #001668; transform: scale(105.5%,100%); transform-origin: left; } #forecast-text, #forecast-text * { font-family: Interstate; font-size: 41px } #forecast-text { color: #171717; position: absolute; padding: 1.1% .75%; padding-right: 11.5%; padding-bottom: 0; height: 98.8%; max-height: 98.8%; bottom: 0; line-height: 115%; width: 100%; margin-top: .4%; overflow: hidden; transform: scale(106%,100%); transform-origin: left; } .wrappertest2 { font-weight: 700; position: relative; overflow: hidden; width: 100%; height: 79.8%; transform: translate(0,-2px); } .forecast-tiles { font-weight: 700; position: absolute; width: 100%; height: 98.8%; bottom: 0px; } #hourlytiles { height: 100%; } #forecast-noreport { position: absolute; padding: .75% .75%; min-height: 75%; max-height: 75%; height: 75%; width: 100%; margin-top: .4%; overflow: hidden; z-index: 5; font-size: 50px; color: #fff; font-weight: 700; padding-top: 5.4%; padding-left: 17.25%; } .forecast-tile { position: relative; background: #5681be; background: linear-gradient(to right, #5783cc 0, #c4d9ff 100%) } .forecast-tile:last-child { flex-grow: 100; border-right: none !important } .forecast-tile .width-sizer { width: 100%; height: 100%; position: relative } .forecast-tile .footer, .forecast-tile .header { font-size: 28px; color: #fff; height: 27%; padding: 10px 11px; text-transform: uppercase } .forecast-tile.daily { width: 17.7% } .forecast-tile.daily .header { font-family: Interstate; font-size: 27.5px; background: linear-gradient(to right, #001668 0, #4564c4 100%); background-color: #001668; padding: 10px 8px; height: 26.5%; transform: scale(105%, 100%); transform-origin: left; } .forecast-tile.daily.weekend .header { font-family: Interstate; font-weight: 600; font-size: 27.5px; color: #001668; padding: 10px 8px; background: linear-gradient(to right, #8caaea 0, #c4d9ff 100%); background-color: #8caaea; height: 26.5%; transform: scale(104%, 100%); transform-origin: left; } .forecast-tile.daily .icon { display: block; position: absolute; margin-left: .45%; bottom: -0.1%; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 85.5%; height: 95px; width: 95px; left: -2px; } .forecast-tile.daily:last-child .icon { margin-left: .5% left: -1px; } .forecast-tile .high, .forecast-tile .low { font-family: Interstate; text-align: right; position: absolute; right: 5%; font-weight: 700; top: 10% } .forecast-tile:last-child .high, .forecast-tile:last-child .low { padding-right: 37% } .forecast-tile .high { top: 30%; font-weight: 800; font-size: 48px } .forecast-tile.daily .high { color: #171717; top: 32%; font-weight: 800; font-size: 47px; transform: translate(2px, -2.5px) scale(102.5%, 100%); transform-origin: right; } .forecast-tile.daily .low { color: rgba(0, 0, 0, .5); top: 64%; font-weight: 800; font-size: 35px; transform: translate(2px, -2.5px) scale(102.5%, 100%); transform-origin: right; } .forecast-tile.hourly { width: 22.5%; border-right: solid 4px #fff } .forecast-tile.hourly .icon { display: block; position: absolute; background-repeat: no-repeat; background-size: 3700% 95.65%; background-position: 51.35% 85.5%; background-image: url(images/icons2010sprite.png); height: 103.5px; width: 103.5px; left: 7.5px; top: 6px; } .forecast-tile.hourly .hourly-high { position: absolute; right: 5.5%; bottom: 0; width: 28%; height: 0; padding-top: 1%; display: flex; flex-flow: column; z-index: 1 } .forecast-tile.hourly .high { color: #171717; font-family: Interstate; top: 0px; position: relative; padding-bottom: 15%; opacity: 0; right: 71px; width: 200px; text-align: center; font-weight: 800; transform: scale(102.5%,100%); } .forecast-tile.hourly:last-child .high { font-family: Interstate; top: -2.5px; font-weight: 800; position: relative; padding-bottom: 15%; opacity: 0; right: 62.5px; width: 200px; text-align: center } .forecast-tile.hourly .temp-bar { width: 100%; flex: 1; position: relative; bottom: 7.2%; background: linear-gradient(to right, #656565 0, #fcfcfc 50%, #656565 100%); background-color: #656565 } .forecast-tile.hourly .footer { font-family: Interstate; font-size: 27px; text-transform: lowercase; padding-top: 11px; padding-left: 8px; position: absolute; width: 100%; bottom: 0; z-index: 0; color: #fff; background: linear-gradient(to right, #4b411e 0, #ae9b57 100%); background-color: #4b411e } .forecast-tile.hourly .footer span{ display: block; transform: scale(106%,100%); transform-origin: left; } .forecast-tile.hourly:last-child .footer { padding-top: 10px } .forecast-tile.hourly:last-child .width-sizer { width: 66% } #logo-area { position: absolute; width: 452px; height: 95px; left: 0; top: 83.4% } #logo-area img { display: block; position: absolute; width: 100%; top: 0%; right: 0% } #arrow-img { display: block; position: absolute; height: 3.7%; left: 31.3%; top: 896px; z-index: 6; } #marquee1 { position: absolute; color: #DDDDDD; left: 32%; top: 900px; width: 68.507%; height: 43px; font-size: 33px; letter-spacing: .5px; text-shadow: 2px 2px 2px #000; transform: scale(112%, 100%); transform-origin: left; } #marquee>div { display: inline-block; white-space: nowrap; width: auto } #marquee-background { position: absolute; color: #fff; left: 31.35%; top: 896px; width: 68.507%; height: 41px; background: linear-gradient(to right, #3d3f41 0, #34363a 100%); } #marquee1 span { font-family: 'Interstate Mono'; padding-right: 3vw; } #marquee2 { color: #171717; position: absolute; left: 31.35%; top: 87.2%; width: 68.507%; height: 5%; font-size: 41.5px; font-weight: 400; padding-top: .52%; font-stretch: expanded; transform: scale(110%, 100%); transform-origin: left; filter: drop-shadow(.5px 0 0 #171717); } .marqueeheadersevere { font-synthesis: weight; position: absolute; font-family: 'Interstate Cn'; font-weight: 800; color: #DDDDDD; left: 451px; letter-spacing: 1.5px; top: 894px; width: 68.75%; height: 43px; margin-top: 2px; font-size: 34.5px; text-shadow: 2px 2px 4px #000; padding-top: .15%; background-color: #d51e08; background: linear-gradient(to right, #d51e08 0, #b41a08 100%); padding-left: 40px; transform: scale(112%, 100%); transform-origin: left; z-index: 13; } .marquee { overflow: hidden; } .info-slide .info-subheadershadowfix { font-weight: 400; font-family: 'Frutiger 57 Condensed'; color: #fff; display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 39px; height: 60px; z-index: 6; white-space:nowrap; text-shadow: 2px 2px 3px #000; position: absolute; min-width: 20%; } .severe-city-info-slide .info-subheadershadowfix { } .severe-city-info-slide .info-subheader { } .info-slide .info-subheadershadowfix span { position: absolute; top: 50.8%; transform: translateY(-42.5%) scale(116%,100%); transform-origin: left; left: 7px; width: 250%; } .city-info-slide .info-subheader { padding-right: 10%; } .info-slide #subhead-city { font-family: Frutiger; font-size: 31px; padding-top: 0px; transform: translateY(-43.5%) scale(105.9%,100%); transform-origin: right; right: 90px; font-stretch: semi-expanded; } .bulletin { background: transparent url(/images/newbg/weather_bulletin_bg.png) no-repeat; background-position: 69% 41.5%; background-size: 120.3% 150.9%; } .bulletin #subhead-noaa { font-size: 22.5px; font-weight: 700; right: 105px; font-stretch: semi-expanded; font-style: italic; color: #f6a67a; font-family: Frutiger; text-shadow: 0px 0px 0px #000; line-height: 35px; transform: scale(101%,100%) translateY(-42.5%); transform-origin: right; } #marqueeSevere { font-family: 'Interstate'; text-shadow: 2px 2px 4px #000; font-weight: 400; position: absolute; left: 451px; top: 86.9%; width: 68.7%; height: 56px; font-size: 46px; padding-top: .25%; background-color: #510d08; color: #DDDDDD; background: linear-gradient(to right, #510d08 0, #b41a08 100%); text-transform: uppercase; transform: scale(110%, 100%); transform-origin: left; white-space:nowrap; z-index: 13; } #marqueeSevere div{ font-family: 'Interstate2'; text-shadow: 2px 2px 4px #000; font-synthesis: weight; font-weight: 600; font-size: 44.5px; letter-spacing: 1px; line-height: 100%; color: #DDDDDD; } #maps { width: 100%; height: 400px; }