*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.display-inline * {
  display: inline-block;
}

/* Variables */
:root {
	--body-font: 'Roboto', sans-serif;
	--special-font: 'Open Sans', sans-serif;
	--light-grey: #F7F5F5;
	--green: #93C17E;
	
	--primary-brand: #00515b;
	--secondary-brand: #333333;
}

/* TYPOGRAPHY
Using the Golden Section Scale factor from https://www.gridlover.net/try
*/
html {
  line-height: 21px;
  /*font-size: calc(15px + 0.390625vw);*/
  font-size: clamp(1rem, 0.781vw + 0.5rem, 2.5rem);
}

body {
	font-size: 1rem;
	line-height: 1.45;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-style: normal;
	background: #fff;
	color: #3E3E3E;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;  
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-style: normal;
}

h1, .h1 {
	font-size: 2rem;
	line-height: 2.5rem;
	margin-top: 1.3125rem;
	margin-bottom: 2.625rem;
	}

h2, .h2 {
	font-size: 1.75rem;
	line-height: 2rem;
	margin-top: 1.3125rem;
	margin-bottom: 1.3125rem;	
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
	font-weight: 600;
	font-style: normal;
}

h3, .h3 {
  font-size: 1.625rem;
  line-height: 1.85rem;
  margin-top: 1.3125rem;
  margin-bottom: 1rem;
}

h4, .h4 {
  font-size: 1rem;
  line-height: 1.3125rem;
  margin-top: 1.3125rem;
  margin-bottom: 0rem;
}

h5, .h5, h6, .h6 {
  font-size: 1rem;
  line-height: 1.3125rem;
  margin-top: 1.3125rem;
  margin-bottom: 0rem;
}

@media only screen and (min-width: 62em) {
  h1, .h1 {
    font-size: 4.25rem;
    line-height: 5.25rem;
  }
  
  h2, .h2 {
    font-size: 2.625rem;
    line-height: 2.625rem;
  }  
}


p, ul, ol, pre, table, blockquote {
  margin-top: 0rem;
  margin-bottom: 1.3125rem;
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

a, b, i, strong, em, small, code {
  line-height: 1;
}


em {
  font-weight: 700;
  font-style: italic;
}

b, strong {
  font-weight: 700;
}

a {
  word-break: break-word;
  text-decoration: none;
  outline: none;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.allow-newlines {
  white-space: pre-wrap;
}

img,
.img-responsive {
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

.flex-row {
	display: flex;
	align-items: center;
}

.flex-row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.no-margin {
	margin: 0;
}

.text-left {
	text-align: left;
}

/* Layout */
.main-wrapper {
	display: flex;
	height: 100vh;
}

.large-col {
	width: 70%;
	background: #F7F5F5;
	padding: 2.5% 3%;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logo-row {
	height: 8%;
}

.tv-news {
	height: 75%;
}

.tv-news.full-height {
	height: 85%;
}

.tv-events {
	height: 15%;
}
.small-col {
	width: 30%;
	color: white;
}

.logo-row {
	align-items: center;
	margin-bottom: .75rem;
}

.logo-row a{
	width: 20%;
	display: block;
}

.school .logo-row a {
	width: 25%;
}

.logo-row img {
	width: 100%;
}

/*.status {
    min-width: 220px;
}*/

.bus-status-row {
	font-weight: 500;
	gap: .5rem;
	width: 80%;
    justify-content: flex-end;
    text-align: right;
	height: 100%;
	max-height: 5vh;
}

.status {
	white-space: nowrap;
}

.bus-on-time span {
	color: #93C17E;
}

.bus-delayed span {
	color: #F5B61F
}

.bus-cancelled span {
	color: #E05B2A;
}

.bus-status {
	width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0.25rem;
    text-align: right;
    margin-left: auto;
}

.bus-status span {
	margin-left: 5px;
}

.bus-status span::before {
	content: "";
    width: .75rem;
    height: .75rem;
    display: inline-block;
    border-radius: 50%;
    margin-right: .5rem;
	animation: scaleIn 2s infinite alternate;
}

.bus-on-time span::before {
    background: #93C17E;
    border: 0.15rem solid #c8debe;
}

.bus-delayed span::before {
    background: #F5B61F;
    border: 0.15rem solid #f2d796;
}

.bus-cancelled span::before {
    background: #E05B2A;
    border: 0.15rem solid #f4a284;
}


/* News */
.news-cover img, 
.news-cover {
    width: 100%;
	height: 80%;
    object-fit: cover;
	object-position: center;
}

.no-card-content .news-cover,
.no-card-content .no-news-cover {
	height: 90%;
}

.news-cover img {
	height: 100%;
}

.news-cover img.top {
    object-position: top;
}

.news-cover img.center {
    object-position: center;
}

.news-cover img.bottom {
    object-position: bottom;
}

.no-news-cover {
	background: #cfcfcf;
    width: 100%;
	height: 80%;
}

.newsSwiper .swiper-slide {
	height: 100%;
}

.card-content, .card-content.no-card-content {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	height: 100%;
}

.no-news-cover img {
	display: block;
    margin-left: auto;
    padding: 1.5rem;
	opacity: .5;
	width: 30%;
}

.news-text {
	position: relative;
	height: 11rem;
    background: white;
    padding: 2rem;
    line-height: 1.6;
    width: 95%;
    margin: -10rem auto 0;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-description {
	margin-bottom: 1rem;
}

/* no internal event */
.full-height .no-news-cover,
.full-height .news-cover {
	height: 80%;
}

.full-height .news-text {
	height: auto;
}

.no-card-content .news-text {
	height: auto;
}

.no-card-content .card-description {
	margin-bottom: 0;
}


.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.card-date-wrapper {
	justify-content: flex-start;
}

.card-date-wrapper svg {
	fill: #919191;
	margin-right: .5rem;
	width: 25px;
}
.card-date {
    font-weight: 500;
    display: block;
}

.newsSwiper .swiper-slide.no-card-content:not(".swiper-slide-visible") {
	opacity: 0!important;
}

.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal {
	left: unset;
    right: 5%;
    bottom: 1rem;
    text-align: right;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .25rem;
}

.swiper-pagination-bullet {
    width: .75rem;
    height: .75rem;
    background: none;
    border: .1rem solid #00515b;
	opacity: 1;
	margin-right: 5px;
	border-radius: 50%;
}

.swiper-pagination {
    right: 1rem;
    bottom: 2rem;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #00515b;
}

@media (min-width: 125em) {
	.news-text {
		line-height: 1.8;
	}
}
/* Important Events */
.tv-events {
	margin-top: 2%;
}

.event-item {
    background: #00515b;
    color: white;
    padding: 2% 4%;
	gap: 1rem;
    font-size: 1.1rem;
}

.event-item i {
    font-size: 3.2rem;
}

.tv-events .event-name {
	font-weight: 900;
	font-size: 1.2rem;
}

.tv-events .format-date,
.tv-events .format-date-calendar {
	font-weight: 700;
}

/* Upcoming Events */
.events-wrapper {
	height: 63%;
	padding: 9%;
	overflow: hidden;
}
.current-time {
	font-family: 'Open Sans', sans-serif;
	font-size: 3rem;
	margin-bottom: 1rem;
	text-align: center;
}

@media (min-width: 160em) {
	.current-time {
		font-size: 4rem;
	}
}
.event-details {
	font-size: 1rem;
}

.format-date-calendar {
	font-weight: 900;
	text-transform: uppercase;
	margin-right: 1rem;
}

.events-wrapper .event-name {
	font-weight: 500;
}

.events-wrapper td {
    padding-bottom: 0.35rem;
    vertical-align: top;
}

.events-wrapper td.date-col {
    white-space: nowrap;
}

/* Weather */
.weather-wrapper {
	position: relative;
	height: 37%;
	padding: 0 12%;
	font-weight: 500;
}

.swiper {
  width: 100%;
  height: 100%;
}

.weatherSwiper .swiper-slide {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.day-tag {
	font-size: 1.5rem;
}

#today-date, #tomorrow-date {
	font-size: 1.2rem;
}

.temp {
	font-size: 2.4rem;
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
	margin: .5rem 0;
}

.city {
	font-size: 1.2rem;
	font-weight: 400;
}
.weather-icon-row {
	justify-content: center;
    gap: .25rem;
}
.weather-icon {
	width: 20%;
}

.attribution, 
.primary-bg .attribution {
    color: #eaeaead9;
    font-size: .5rem;
    display: block;
    position: absolute;
    bottom: .5rem;
    right: .75rem;
}

/* Ticker */
/*@keyframes ticker {
	100% {
		transform: translateX(-100%);
	}
}

.ticker{
	display: flex;
	width: 10rem;
	overflow: hidden;
}

.ticker__list {
  display: flex;
  white-space: nowrap;
  animation: ticker 5.5s infinite linear;
}

  
.ticker__item {
  margin-right: 1.25rem;
}
  */

@keyframes scaleIn {
  0% {
    transform: scale(.95, .95);
  }
  100% {
    transform: scale(1.1, 1.1);
  }
}