@font-face {
  font-family: 'GreycliffCF-Heavy';
  src: url('../font/GreycliffCF-Heavy.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-Heavy.eot') format('woff2'),
  	   url('../font/GreycliffCF-Heavy.woff') format('woff'),
  	   url('../font/GreycliffCF-Heavy.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-Heavy.svg#svgFontName') format('svg');
 }



@font-face {
  font-family: 'GreycliffCF-Medium';
  src: url('../font/GreycliffCF-Medium.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-Medium.eot') format('woff2'),
  	   url('../font/GreycliffCF-Medium.woff') format('woff'),
  	   url('../font/GreycliffCF-Medium.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-Medium.svg#svgFontName') format('svg');
 }

 @font-face {
  font-family: 'GreycliffCF-Regular';
  src: url('../font/GreycliffCF-Regular.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-Regular.eot') format('woff2'),
  	   url('../font/GreycliffCF-Regular.woff') format('woff'),
  	   url('../font/GreycliffCF-Regular.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-Regular.svg#svgFontName') format('svg');
 }

 @font-face {
  font-family: 'GreycliffCF-Bold';
  src: url('../font/GreycliffCF-Bold.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-Bold.eot') format('woff2'),
  	   url('../font/GreycliffCF-Bold.woff') format('woff'),
  	   url('../font/GreycliffCF-Bold.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-Bold.svg#svgFontName') format('svg');
 }
 @font-face {
  font-family: 'GreycliffCF-BoldOblique';
  src: url('../font/GreycliffCF-BoldOblique.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-BoldOblique.eot') format('woff2'),
  	   url('../font/GreycliffCF-BoldOblique.woff') format('woff'),
  	   url('../font/GreycliffCF-BoldOblique.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-BoldOblique.svg#svgFontName') format('svg');
 }
 @font-face {
  font-family: 'GreycliffCF-HeavyOblique';
  src: url('../font/GreycliffCF-HeavyOblique.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-HeavyOblique.eot') format('woff2'),
  	   url('../font/GreycliffCF-HeavyOblique.woff') format('woff'),
  	   url('../font/GreycliffCF-HeavyOblique.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-HeavyOblique.svg#svgFontName') format('svg');
 }
 @font-face {
  font-family: 'GreycliffCF-RegularOblique';
  src: url('../font/GreycliffCF-RegularOblique.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-RegularOblique.eot') format('woff2'),
  	   url('../font/GreycliffCF-RegularOblique.woff') format('woff'),
  	   url('../font/GreycliffCF-RegularOblique.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-RegularOblique.svg#svgFontName') format('svg');
 }


 @font-face {
  font-family: 'GreycliffCF-LightOblique';
  src: url('../font/GreycliffCF-LightOblique.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-LightOblique.eot') format('woff2'),
  	   url('../font/GreycliffCF-LightOblique.woff') format('woff'),
  	   url('../font/GreycliffCF-LightOblique.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-LightOblique.svg#svgFontName') format('svg');
 }


 @font-face {
  font-family: 'GreycliffCF-MediumOblique';
  src: url('../font/GreycliffCF-MediumOblique.eot?#iefix') format('embedded-opentype'),
  	   url('../font/GreycliffCF-MediumOblique.eot') format('woff2'),
  	   url('../font/GreycliffCF-MediumOblique.woff') format('woff'),
  	   url('../font/GreycliffCF-MediumOblique.ttf')  format('truetype'),
  	   url('../font/GreycliffCF-MediumOblique.svg#svgFontName') format('svg');
 }

.body {
	margin: 0;
}
.container {
	background: rgb(250,250,250);
	width: 1200px;
	height: 1600px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 15px;

}

.date {
  	font: 85px GreycliffCF-Heavy;
	margin: -15px;
}

.door-code {
	 font: 32px GreycliffCF-Heavy;
}

.message {
  	font: 20px GreycliffCF-Heavy;
	margin: -15px;
}

.time {
	  	font: 80px GreycliffCF-Heavy;
}
.date-time-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
}
.calendar-container {

	display: grid;
	grid-template-columns:10px auto  auto  10px ;
	align-items: baseline;
	gap: 0px 25px;
}
.calendar-container .allday {
	font-family: GreycliffCF-Heavy;
	font-size: 32px ;
	grid-column-start:2;
	grid-column-end: 4;
	
	align-self: center ;
	margin:auto;
}
.calendar-container .time {
	font-family: GreycliffCF-Heavy;
	font-size: 32px ;
	grid-column-start:2;
	margin-left: auto; 
	align-self: center ;
}

.calendar-container .title {
		font-family: GreycliffCF-Medium;
	font-size: 32px ;
	grid-column-start:3;
	margin-right: auto; 
	align-self: center ;
}
.transit-container {
	display: grid;
	grid-template-columns:1fr 1fr 1fr;
	align-items: center;
	gap: 0px 125px;
	justify-items:center;

}

.transit-line {
    display: grid;
    /*grid-template-rows:  1fr 1fr;*/
}

.citibike {
	display: grid;
	grid-template-rows:1fr 110px ;
	gap: 10px 10px;
	justify-items:center;
}




.bikes-available  {
	display: inline-block;

	font-family: GreycliffCF-Heavy;
	font-size: 145px;
	 vertical-align: middle;
	 padding-left: 50px;
}


.ebikes-available  {
	display: inline-block;
	font-family: GreycliffCF-Heavy;
	font-size: 60px;
	justify-self: center;
	height:65px;
}


.docks-available  {
	display: inline-block;
	font-family: GreycliffCF-Heavy;
	font-size: 70px;
	vertical-align: middle;
}

.citibike-station {
    display: grid;

}
.station {
	font-family: GreycliffCF-Medium;
	font-size: 36px ;
}

.transit-line .direction {
font-family: GreycliffCF-Medium;
	font-size: 24px ;
}


.transit-line .direction span{
font-family: GreycliffCF-Medium;
	font-size: 36px ;

}

.transit-time {
	display: grid;
	grid-template-rows:1fr 110px ;
	gap: 10px 10px;
	justify-items:center;
}

.timeToDeparture {
	display: inline-block;

	font-family: GreycliffCF-Heavy;
	font-size: 145px;
	 vertical-align: middle;
	 padding-left: 50px;

}

.unitOfTime {
	font-family: GreycliffCF-BoldOblique;
	font-size: 28px;
	padding-left: 5px;
	
}
span.brooklyn {
	font-size: 30px !important;
	/*font-weight: bold;*/
}
.icon.g-train {
	width: 60px;
	height:60px;
}
 .icon {
	font-family: GreycliffCF-Medium;
	font-size: 30px ;
}
.line-logo {

	height: 65px;
	justify-self: center;
}

.bus {    
	 background: rgb(0,0,0); 
    color: white;
    padding: 2px;
	font-family: Helvetica;
	font-size: 45px;
	font-weight: bold;
}

.weather {
	display: grid;
	grid-template-columns:1fr 1fr 1fr ;
	align-items: center;
	gap: 0px 10px;
	justify-items:center;
}
.weather .temperature {
	font-family: GreycliffCF-Heavy;
	font-size: 100px;
	grid-column-start:1;
	justify-self: end;

}


.weather .wi {
	font-size: 125px;
	padding:8px;
	/*grid-column-start:2;*/
	 justify-self: center;
     grid-column: 1 / -1;

}
.weather .weather-summary {
	font-family: GreycliffCF-Medium;
	font-size: 36px;
	grid-column-start:3;
}

.spark-temperature-line {
	padding: 0 100px 0 100px;
	/*width: 100%; height: auto;*/
}

.spark-temperature-line .labels {
	font-family: GreycliffCF-Bold;
	font-size: 14px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	align-items: center;
	padding-left:10px;
	gap: 0px 0px;

}

.weather-line div {
	padding: 0 20px;
}
 .weather-line .sunrise, .sunset {

		display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 0;
}

.weather-line .wi {
	padding: 0;
	font-size: 35px;
}

 .weather-line .moon {

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 0;
}


 .weather-line .rain {

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 0;
}

.weather-line .wind {

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 0;
}

.weather-line {
		display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/*padding: 100px;*/
	font-family: GreycliffCF-Bold;
	font-size: 20px;

}

.uv {
	padding: 8px;
	font-family: GreycliffCF-Heavy;
	font-size: 30px;
	text-align: center;
}
.uv-chart {
  height: 50px;
  margin: auto;
  display: block;
}

svg.uv-chart > path {
  stroke-linecap: round;
  stroke-width: 10px;
}

path.grey {
  stroke: lightgrey;
}

path.uv-index {
  stroke: black;
  stroke-dasharray: calc(50 * 3.142 * 1.85);
  stroke-dashoffset: 295;
  /* adjust last number for variance */

}

path.uv-0 {
  stroke-dashoffset: calc(295 - 14 * 0) !important;
}

path.uv-1 {
  stroke-dashoffset: calc(295 - 14 * 1) !important;
}

path.uv-2 {
  stroke-dashoffset: calc(295 - 14 * 2) !important;
}

path.uv-3 {
  stroke-dashoffset: calc(295 - 14 * 3) !important;
}

path.uv-4 {
  stroke-dashoffset: calc(295 - 14 * 4) !important;
}

path.uv-5 {
  stroke-dashoffset: calc(295 - 14 * 5) !important;
}

path.uv-6 {
  stroke-dashoffset: calc(295 - 14 * 6) !important;
}

path.uv-7 {
  stroke-dashoffset: calc(295 - 14 * 7) !important;
}

path.uv-8 {
  stroke-dashoffset: calc(295 - 14 * 8) !important;
}


path.uv-9 {
  stroke-dashoffset: calc(295 - 14 * 0) !important;
}



path.uv-10 {
  stroke-dashoffset: calc(295 - 14 * 10) !important;
}


path.uv-11 {
  stroke-dashoffset: calc(295 - 14 * 11) !important;
}

.forecast-container {

	display: grid;
	grid-template-columns: auto auto auto  ;
	align-items: center;
	gap: 0px 50px;
}
.forecast-container .name {
		font-family: GreycliffCF-Medium;
	font-size: 45px;
}
.forecast-container .temperature {
	font-family: GreycliffCF-Bold;
	font-size: 60px;
	margin-top: -15px;
}
.forecast-container .day {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.forecast-container .day .wi {
	font-size: 145px;
	padding-bottom: 40px;
	padding-top: 5px;
}
.day1 {
	grid-column-start:1;
}

.day2 {
	grid-column-start:2;
}
.day3 {
	grid-column-start:3;
}


.headline {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
margin: 20px;	
}
.headline .thumb {
}
.headline .title {
	padding: 0px 50px;
		font-family: GreycliffCF-Regular;
	font-size: 20px;
}