/* Fonts */
/* inter-200 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('../fonts/google/inter-v11-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/google/inter-v11-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-300 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/google/inter-v11-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/google/inter-v11-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/google/inter-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/google/inter-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-800 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/google/inter-v11-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/google/inter-v11-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Main Styles */
*{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', Arial, Helvetica, sans-serif; }
body{ margin: 0; padding: 0; }

figure{ margin: 0; }

/* Layout */
#pageWrap{ display: flex; min-height: 100vh; flex-direction: column; }
#header{ max-height: 170px; background-color: #9370B1; color: #FFF; padding: 35px 50px; width: 100%; display: flex; }
#header #system-logo{ max-height: 100px; height: 100%; width: 35%; padding: 0 20px 0 0; box-sizing: content-box; }
#header #system-logo img{ height: 100%; max-height: 100px; width: auto; }
#header .widget{padding: 0 0 0 30px; display: flex; flex-direction: column; justify-content: center; }
#header .widget p{ font-size: 1.5rem; line-height: 1.65; }

#header #clock{ width: 30%; }
#header #clock .time{ font-size: 3.75rem; line-height: 65px; font-weight: 300; }
#header #clock .date{ font-size: 1.35rem; font-weight: 200; line-height: 25px; padding-top: 10px; }

#header #weather{ width: 35%; display: flex; flex-direction: row; }
#header #weather #icon{ width: 120px; height: 100px; padding: 5px 15px; }
#header #weather #icon img{ width: 90px; }
#header #weather .main{ padding: 0 0 0 25px; flex: 1; }
#header #weather .data{ display: flex; flex-direction: row; height: 65px; align-items: flex-end; padding: 0 0 10px; }
#header #weather .data .temp{ line-height: 60px; font-size: 3rem; padding: 0 30px 0 0; font-weight: 300; }
#header #weather .data .desc{ text-transform: capitalize; font-weight: 200; line-height: 40px; }
#header #weather .humid_wind{ display: flex; flex-direction: row; height: 30px; }
#header #weather .humid_wind .item{ display: flex; flex-direction: row; }
#header #weather .humid_wind .humidity{ padding: 0 15px 0 0; }
#header #weather .humid_wind .wind{ padding: 0 0 0 15px; }
#header #weather .humid_wind .item .icon{ height: 30px; padding: 0 7px; }
#header #weather .humid_wind .item .icon img{ height: 28px; }
#header #weather .humid_wind .item .value{ padding: 0 0 0 12px; line-height: 30px; font-size: 1.5rem; }

#content{ flex: 1; display: flex; flex-direction: row; }

#content #main #ad-slider ul, #content #main #rss #feed ul{ list-style: none; }
#content #main #ad-slider li, #content #main #rss #feed li{ width: 100%; height: 100%; }

#content #main{ flex: 1; display: flex; flex-direction: column; }
#content #main #ad-slider{ flex: 1; background-color: #412c53; }
#content #main #ad-slider .unslider, #content #main #ad-slider #slides, #content #main #ad-slider ul, #content #main #ad-slider li, #content #main #ad-slider .ad{ height: 100%; }
#content #main #ad-slider .ad{ background-size: contain; background-position: center; background-repeat: no-repeat; }
#content #main #rss{ height: 153px; display: flex; flex-direction: row; }
#content #main #rss #rss-logo{ width: 270px; background-color: #9D0A0E; text-align: center; padding: 40px; }
#content #main #rss #rss-logo img{ height: 100%; }
#content #main #rss #news{ flex: 1; }
#content #main #rss #feed{ overflow: auto; height: 153px; width: 100%; background-color: #FFF; }
#content #main #rss #feed .item{ height: 153px !important; padding: 25px 40px; display: flex; flex-direction: column; }
#content #main #rss #feed .item *{ line-height: 1; }
#content #main #rss #feed .item .title{ padding: 0 0 15px; font-size: 1.65rem; }
#content #main #rss #feed .item .desc{ padding: 0 0 15px; flex: 1; font-size: 1.15rem; }
#content #main #rss #feed .item .datetime{ color: #707070; font-size: 0.85rem; }

#content #sidebar{ background-color: #7a5799; color: #FFF; width: 475px; display: flex; flex-direction: column; overflow: auto; }
#content #sidebar .spacer{ flex: 1; }
#content #sidebar .events{ overflow: hidden; }
#content #sidebar .unslider, #content #sidebar .events, #content #sidebar .events ul{ height: 100%; }
#content #sidebar .event{ float: left; width: 100%; height: 100%; display: flex; flex-direction: column; }
#content #sidebar .event .featured{ height: 350px; }
#content #sidebar .event .data{ padding: 35px 25px; flex: 1; display: flex; flex-direction: column; }
#content #sidebar .event .featured{ background-size: cover; background-repeat: no-repeat; background-position: center; }
#content #sidebar .event .data .event_title{ display: flex; padding-bottom: 18px; align-items: center; }
#content #sidebar .event .data .event_date{ width: 90px; background-color: #FFF; color: #9370B1; padding: 12px 6px; text-align: center; }
#content #sidebar .event .data .event_date .month{ line-height: 30px; font-size: 1.15rem; }
#content #sidebar .event .data .event_date .date{ line-height: 40px; font-size: 2.2rem; font-weight: 700; }
#content #sidebar .event .data .event_title .title{ vertical-align: middle; padding: 8px 0 8px 16px; font-size: 2.4rem; font-weight: 300; }
#content #sidebar .event .data .event_time .time{ font-size: 1.20rem; font-weight: 200; color: #eaeaea; }
#content #sidebar .event .data .desc{ flex: 1; padding: 18px 0; }
#content #sidebar .event .data .location .venue_name, #content #sidebar .event .data .tickets .ticket_details{ padding: 24px 0 0; font-size: 1.55rem; line-height: 1; }
#content #sidebar .event .data .location .icon, #content #sidebar .event .data .tickets .icon{ padding-right: 12px; display: inline-block; width: 52px; text-align: center; }

/* Front Page */