*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items: center;
	font-family: 'Open Sans', sans-serif;
	height:100vh;

	background: url(s1.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.wrap{
	height:500px;
	width:75%;
	max-width:1000px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-content:center;
	background:rgba(0,0,0,.8);
}

.shadow {
	-webkit-box-shadow: 0px 0px 200px -3px #000;
	-moz-box-shadow: 0px 0px 200px -3px #000;
	box-shadow: 0px 0px 200px -3px #000;
}

a{
  background:rgba(246, 36, 89,.5);
  color:#f3f3f3;
  border:none;
  position:relative;
  height:60px;
  width:75%;
  padding:0 2em;
  cursor:pointer;
  transition:600ms ease all;
  outline:none;
  align-self:center;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:1.5em;

}
a:hover{
  background:rgba(255, 255, 255,.8);
  color:rgb(246, 36, 89);
}

a:before,a:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:4px;
  width:0;
  background: rgb(246, 36, 89);
  transition:400ms ease all;
}
a:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
a:hover:before,a:hover:after{
  width:100%;
  transition:600ms ease all;
}

footer{
	position:absolute;
	bottom:0;
	left:50%;
	transform: translate(-50%, -50%);
	color:white;
	font-weight:300;
	font-size:1.3em;
}
p:first-child{
	color:white;
	align-self:center;
	font-size:2em;
	font-weight:bold;
	margin-bottom:100px;
}

p.rl-clock{
	color:white;
	align-self:center;
	font-size: 5.2em;
	margin-bottom:140px;
}

a{
	color:#f3f3f3;
    text-decoration: none;
}

@media screen and (max-width: 768px){
	p.rl-clock{
		font-size: 2.4em;
		margin-bottom:150px;
		margin-top:30px;
	}

	p:first-child{
		font-size:4vw;
		margin-bottom:50px;
	}

	a{
		font-size:4vw;
	}

	footer{
		display:none;
	}

}