.clock {
	position: relative;
	display: block;
	/*width:31.333%;*/
	width: 80%;
	margin: 0 auto;
	/*padding-bottom:31.333%;*/
	padding-bottom: 80%;
	border-radius: 50%;
	background: radial-gradient(#000, #000 .1em, #FFF .1em, #FFF), #FFF;
	/*opacity:0*/
}
 .clock.show {
	-webkit-transition: all 2.5s cubic-bezier(.12, 1.03, .34, 1);
	transition: all 2.5s cubic-bezier(.12, 1.03, .34, 1);
	opacity: 1;
}
.clock::after {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	display: none;
	width: 4%;
	height: 4%;
	content:'';
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgb(255, 255, 255, .5);
}
.minutes-container, .hours-container, .seconds-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.hours-container {
	-webkit-animation: rotate 43200s infinite linear;
	animation: rotate 43200s infinite linear;
}
 .bounce .minutes-container {
	-webkit-transition: -webkit-transform .3s cubic-bezier(.4, 2.08, .55, .44);
	transition: -webkit-transform .3s cubic-bezier(.4, 2.08, .55, .44);
	transition: transform .3s cubic-bezier(.4, 2.08, .55, .44);
	transition: transform .3s cubic-bezier(.4, 2.08, .55, .44), -webkit-transform .3s cubic-bezier(.4, 2.08, .55, .44);
}
.bounce .seconds-container {
	-webkit-transition: -webkit-transform .2s cubic-bezier(.4, 2.08, .55, .44);
	transition: -webkit-transform .2s cubic-bezier(.4, 2.08, .55, .44);
	transition: transform .2s cubic-bezier(.4, 2.08, .55, .44);
	transition: transform .2s cubic-bezier(.4, 2.08, .55, .44), -webkit-transform .2s cubic-bezier(.4, 2.08, .55, .44);
}
.hours {
	position: absolute;
	top: 21.5%;
	left: calc(50% - .5%);
	width: 1%;
	height: 40%;
	-webkit-transform-origin: 50% 71%;
	transform-origin: 50% 71%;
	background: #888;
}
.minutes {
	position: absolute;
	top: 11%;
	left: calc(50% - .25%);
	width: .5%;
	height: 50%;
	-webkit-transform-origin: 50% 78.5%;
	transform-origin: 50% 78.5%;
	background: #888;
}
.seconds {
	position: absolute;
	z-index: 8;
	top: 14.5%;
	left: calc(50% - .125%);
	width: .25%;
	height: 50%;
	-webkit-transform-origin: 50% 71%;
	transform-origin: 50% 71%;
	background: #888;
}
.label {
	font-family: MyriadPro-Regular, myriad pro regular, MyriadPro, myriad pro, Helvetica, Arial, sans-serif;
	font-size: .5em;
	font-weight: 700;
	position: absolute;
	top: -4em;
	left: 50%;
	/*don't need this*/
	display: none;
	padding: .5em .75em .25em;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	text-transform: uppercase;
	color: #000;
	border-radius: .25em;
	background: #FFF;
}
@-webkit-keyframes rotate {
	100% {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}
@keyframes rotate {
	100% {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}
.clock.station {
	/*background:#fff url(coming-soon_Station_Clock.svg) no-repeat center;*/
	/*background:#999 url(clock.svg) no-repeat center; the ps svg export is crap*/
	background: transparent url(clock.png) no-repeat center;
	background: transparent url(clock.webp) no-repeat center;
	background-size: 95%;
	opacity:.5;
}
/*.clock.station .seconds::before {background:red; border-radius:50%; content:""; position:absolute; top:-9%; left:-200%; height:18%; width:500% }*/
.hours.angled {
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
}
.minutes.angled {
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
}
/*.seconds.angled {-webkit-transform:rotateZ(0deg); transform:rotateZ(0deg) }*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
 body {
}
.bg-img{
	background:blue url(shutterstock_128313758_1080.jpg) no-repeat center center;
	background-size: cover;
	height:100vh;
}
.overlay {
	position:relative;
}
.overlay:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:hsla(0, 0%, 0%, .5);
}
.banner {
	padding:32px 0 0 32px;
	z-index:1;
	position:relative;
	/*height:200px;*/
	/*background:white;*/
}
.container {
	position: relative;
	width: 60%;
	margin: 0 auto;
}
.message {
	font-family: sans-serif;
	font-size: 7vw;
	color:white;
	text-transform: uppercase;
	/* background: red; */
	position: absolute;
	z-index: 100;
	top: 24vw;
	float: left;
	width: 60vw;
	text-align: center;
	line-height: 1.5;
	left: 20vw;
}

@media (min-width: 2161px){
	.message{
		top: 19vw;
	}
}
@media (max-width: 2161px){
	.message{
		top: 20vw;
	}
}
@media (max-width: 1921px){
	.message{
		top: 21vw;
	}
}
@media (max-width: 1281px){
	.message{
		top: 24vw;
	}
}
@media (max-width: 1025px){
	.message{
		top: 26vw;
	}
}
@media (max-width: 769px){
	.message{
		top: 30vw;
	}
}
@media (max-width: 577px){
	.message{
		top: 47vw;
	}
}
@media (max-width:576px) and (min-width: 499px){
	.message{
		top: 38vw;
	}
}
@media (max-width: 415px){
	.message{
		top: 43vw;
	}
}
@media (max-width: 376px){
	.message{
		top: 46vw;
	}
}
@media (max-width: 361px){
	.message{
		top: 47vw;
	}
}
@media (max-width: 321px){
	.message{
		top: 52vw;
	}
}
.message p {
	position:relative;
	/*width:400px;*/
	margin:0 auto;
}
.t1, .t2, .t3 {
	display: block;
}
.t1, .t3 {
	font-size: 50%;
}
.t2 {
	font-size: 100%;
	line-height:1.2;
}
