@font-face {
  font-family: AtlasGrotesk;
  font-weight: normal;
  src: url(../fonts/AtlasGrotesk/AtlasGrotesk-Regular-Web.woff2) format('woff2'),
  url(../fonts/AtlasGrotesk/AtlasGrotesk-Regular-Web.woff) format('woff'),
  url(../fonts/AtlasGrotesk/AtlasGrotesk-Regular-Web.eot) format('eot');
}

@font-face {
  font-family: AtlasGrotesk;
  font-weight: bold;
  src: url(../fonts/AtlasGrotesk/AtlasGrotesk-Bold-Web.woff2) format('woff2'),
  url(../fonts/AtlasGrotesk/AtlasGrotesk-Bold-Web.woff) format('woff'),
  url(../fonts/AtlasGrotesk/AtlasGrotesk-Bold-Web.eot) format('eot');
}

body{
	font-family: AtlasGrotesk;
	color: #0F2D69;
}

main{
	max-width: 900px;
	width: calc(100% - 60px);
	padding: 60px 30px;
	margin: 0 auto;
}

.logo{
	width: 300px;
	margin: 0 auto;
	display: block;
	margin-bottom: 80px;
}


.intro {
	max-width: 720px;
	width: 100%;
	font-size: 24px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 65px;
}

.intro-line{
	width: 170px;
	border-color: #585858;
	border-width: 1px;
	margin-bottom: 65px;
}

h2 {
	font-size: 48px;
	font-weight: bold;
}

video {
	width: 100%;
	margin-bottom: 50px;
}

.video-caption{
	color: #585858;
}

footer{
	max-width: 900px;
	width: calc(100% - 60px);
	padding: 20px 30px 60px 30px;
	margin: 0 auto;
	border-top: 1px #585858 solid;
	text-align: center;
}

footer a{
	margin: 0 10px;
	text-decoration: none;
}

footer a:hover{
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 520px) {
	
	main {
		padding: 30px 15px;
		width: calc(100% - 30px);
	}
	
	.logo{
		width: 250px;
	}
	
	h2 {
		font-size: 24px;
	}
	
	.intro {
		font-size: 14px;
		margin-bottom: 40px;
	}
	
	footer {
		padding: 20px 15px 30px 15px;
		width: calc(100% - 30px);
	}
}