html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
.intro{
	height: 100%;
	width:  100%;
	margin: auto;
	background: url(""); 
	display: table;
	top: 0;
	bottom: 0;
	background-size: cover;
}
.intro .inner {
	display:  table-cell;
	vertical-align:  middle;
	width:  100%;
	max-width: none;
}
.content {
	max-width: 600px;
	margin: 0 auto;
	text-align:  center;
	padding-bottom: 32%; 
}
.content h1 {
	font-family: 'Calibri' , sans-serif;
	font-size: 600%;
	font-weight: 500;
	color: #ffffff;
	line-height:  50%;
}
.btn {
	font-family: 'Calibri' , sans-serif;
	font-size:  150%;
	font-weight: 200;
	color: #ffffff;
	text-transform: uppercase;
	text-decoration:  none;
	border:  solid #ffffff;
	padding:  10px 20px;
	border-radius: 10px;
	transition:  all 0,5s;
}
.btn:hover {
	color: #666666;
	border:  solid #666666 2px;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
.content { 
	padding-bottom: 35%; 
}
.content h1 { 
               font-size:  450%;
 }
 .btn { 
 	font-size:  120%;
 	padding: 10px 15px;
  }
@media screen and (max-width: 768px) {
.intro{
	background: url(""); 
}
.content { 
	padding-bottom: 40%; 
}
.content h1 { 
               font-size:  300%;
 }
 .btn { 
 	font-size:  110%;
 	padding: 10px 15px;
  }
@media screen and (max-width: 480px) {
.intro{
	background: url(""); 
}
.content { 
	padding-bottom: 50%; 
}
.content h1 { 
               font-size:  250%;
 }
 .btn { 
 	font-size:  110%;
 	padding: 7px 12px;
  }

 :focus {
    outline: none !important; 
}