@font-face {
    font-family:"caslon regular";
    src:url("CaslonOS-Regular.otf") format("opentype");
    font-style:normal;font-weight:lighter;
}
@font-face {
    font-family:"source sans pro";
    src:url("source sans pro.woff2") format("woff2");
    font-style:normal;font-weight:1500;
}

body {
	 font-family:  "caslon regular","source sans pro";
	margin:0;
	overflow-x:hidden;
}

.BDR-Hero-Banner
{
	width:100vw;
	height:100vh;
	background-image:url("BDR-Hero-Banner.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center top;
	position:relative;
	box-sizing:border-box;
}

.Call-To-Action
{
	width: 40rem;
	color: white;
	position: absolute;
	top:30%;
	left: 10%;
}

.Call-To-Action h1 { font-size: 4rem;margin:0; font-weight:lighter;}

.Call-To-Action p { font-family: "source sans pro";font-size: 1.5rem;margin-top:1rem;margin-bottom:2.2rem;}

/* assuming the button is a link otherwise it should be easy for you to change*/
.Deposit-Submission { 
font-size: 2em;

background-color:white;  
color: rgb(10, 50, 77);
padding: 0.75rem;
padding-left: 2.8rem;
padding-right: 3rem;
font-family: "source sans pro";
 text-decoration: none;
 font-style: normal;
border:none;
box-shadow: 0px 0px 15px 15px rgba(83, 147, 225, 0.2);
}


.Call-To-Action a:hover {
	cursor: pointer;
}

.Deposit {
	display: flex;
	justify-content: space-around;
	flex-wrap:wrap;
	padding-top: 10rem;
	margin-bottom:10rem;
}

.Deposit .BTC, .Deposit .CAD {
	padding-left:1rem;
	flex: 40rem 0 0;
	background-color: rgb(230,230,230);
	padding-bottom: 3rem;
	margin-bottom:4rem;
	
}

.Deposit .BTC h1, .Deposit .CAD h1, .Deposit .Cad p {
	font-size:4rem;
	text-align: center;
	color: rgb(10, 50, 77);
	font-weight:lighter;
}

.Deposit .Cad p {font-size:1.2rem;margin-left:1rem;margin-right:1rem;}

.Deposit .BTC form div {
	height:2.5rem;
	margin:auto;
width:100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 6rem;
max-width:95vw;
}

.Deposit .BTC input {
	background-color:rgb(206,206,206);
	border-top-color:rgb(218,218,218);
	border-left-color:rgb(218,218,218);
	font-size:1.1em;
	top:0;
	display: inline-block;
	width:20rem;
	height:100%;
	margin-right: 0.6rem;
	
	letter-spacing: 0.1em;
}

.Deposit .BTC .Value, .Deposit .Cad .Value
{
	color:rgb(68,68,68);
	border: 1px solid rgb(118,118,118) ;
	border-bottom: 2px solid rgb(118,118,118);
	display: inline-block;
	width: 10rem;
	margin-bottom:2rem;
	background-color: white;
	text-align: center;
	font-size: 1.5em;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-right: 0;
	box-sizing:border-box;
}

.Deposit .BTC .Deposit-Submission
{
	background-color: rgb(10, 50, 77);
	color: white;
	top: 14rem;
margin-left: 14rem;
	width:20rem;
	text-align:center;
}

footer {
	margin-top:20rem;
		display: flex;
	justify-content: space-between;
	background-color: rgb(230,230,230);
	/* in the reference image the margin seems to be set to something around 5rem, but this could just be a glitch in the formatting. Either way I reccommend that you keep it at 0 because it does not work well with responive design */ 
	margin:0rem;
	padding-left:2%;
	bottom:0;
	width:100%;
	box-sizing:border-box;
}

footer div {
		
	flex: 20rem 1 0;
	background-color: rgb(230,230,230);
	margin: 2rem;
	padding: 1rem;

}
footer div h1{
	letter-spacing: 0.1em;
	display:inline;
	margin:auto;
		font-size:2rem;
	text-align: center;
	color: rgb(10, 50, 77);
	font-weight:lighter;
	border-bottom: 1px solid #000
}

footer div p{
	font-size:0.5em;
}

footer .Name {
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
}

footer .Name h4 {
	display: inline;
	text-align:left;
	
}
.Deposit .details {
	
	
display:flex;justify-content:center;flex-wrap:wrap;max-width:95vw;margin:auto;}

footer .neighbor{
border-right:1px solid black;padding-right:3rem;}
@media (max-width:1550px){
	footer div {
	margin:4rem;}
	footer {flex-wrap:wrap;padding-left:5%;}
}

@media (max-width:1400px){
	
}
@media (max-width:1150px)
{
	footer div {
		margin:2rem;
	}
}

@media (max-width:900px)
{
	
	footer .neighbor{
	border: 0px solid black;}
	footer{padding-left:15%;}
	footer div {margin-left:0; margin-bottom:4rem; max-width:90%;}
	footer div h1 {font-size:3rem;}
	footer .Name {flex: 20rem 1 0; margin-right:4rem; padding-left:1rem;}
	footer div h4 {font-size:1.5rem;}
}

@media (max-width:700px)
{
	body{font-size: 12px;}
	.BDR-Hero-Banner{overflow:hidden;width:100%;}
	.Call-To-Action {max-width:60vw;}
.Call-To-Action h1 { font-size: 1.8rem;margin:0; font-weight:lighter;display:inline-block;}

.Call-To-Action p { font-family: "source sans pro";font-size: 0.75rem;margin-top:0.5rem;margin-bottom:2.2rem;display:inline;}

.Deposit .BTC h1, .Deposit .CAD h1  {
	font-size:2rem;
}
.Deposit .Cad p {
font-size:1rem;
}
.Deposit .BTC input, .Deposit .BTC .Value {
	margin:auto;margin-bottom: 0.8rem;max-width:95%;
}

.Deposit .BTC .Deposit-Submission {
margin-top: 20rem;}
.Deposit .CAD .Value {
display:block;}
.Deposit .details {
width:40vw;}
footer div p {
	font-size:12px;
}
}

@media (max-width:600px)
{
	footer {padding-left:5%;}
	footer div h1 {
font-size:2rem;}}