body {
	display: grid;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #051F3C;
	background: url("../img/background.jpg") no-repeat center center fixed;
	background-size: cover;
    margin: 0;
	padding: 0;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#logo-bar {
	position: absolute;
	right: 0;
}

#logo-bar img {
	padding: 27px 27px 0 0;
	width: 206px;
}

#card {
	display: inline-grid;
    text-align: center;
    padding-top: 150px;
}

#video-play-button {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 104px;
	height: 104px;
	margin: auto;
	cursor: pointer;
	opacity: 1;
}

#video-play-button.videoplayed {
	transition: opacity .5s;
	opacity: 0;
}
  
#video-play-button .video-play-circle {
	stroke-dasharray: 315;
	stroke-dashoffset: 315;
	transition: stroke-dashoffset .5s;
}
  
#video-play-button svg {
	display: block;
	transform: rotate(-90deg);
	transition: transform .3s;
}
  
#video-play-button:hover .video-play-circle {
	stroke-dashoffset: 0;
}
  
#video-play-button:active {
	transform: scale(1.5);
}
  
#video-play-button:active svg {
	transform: rotate(-90deg) scale(.95);
}

#video-wrapper {
	grid-column: 1;
	grid-row: 1; 
	width: 70%;
	margin: 0 auto;
	overflow: hidden;
	border: 10px solid #001937;
	background-color: #001937;
}

#video-wrapper.videoplayed {
	background-color: #001937;
}

video {
	opacity: .33;
	width: 100%;
	outline: none;
}

video.videoplayed {
	transition: opacity 1s;
	opacity: 1;
}

video:focus {
	outline: none;
}

#footer {
	position: fixed;
	box-sizing: border-box;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 50px 50px 50px;
	text-align: center;
}

@media only screen and (max-width: 1024px) {
	#video-wrapper {
		width: 80%;
	}
}

@media only screen and (max-width: 768px) {
	#video-wrapper {
		width: 90%;
	}
}

@media only screen and (max-height: 800px) {
	#footer {
		grid-column: 1;
		grid-row: 2;
		position: relative;
		padding: 50px 20px;
	}
}