@font-face {
    font-family: 'bg_bold';
    src: url('../fonts/brandon_bld-webfont.woff2') format('woff2'),
         url('../fonts/brandon_bld-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bg_medium';
    src: url('../fonts/brandon_med-webfont.woff2') format('woff2'),
         url('../fonts/brandon_med-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bg_medium_italic';
    src: url('../fonts/brandon_med_it-webfont.woff2') format('woff2'),
         url('../fonts/brandon_med_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bg_regular';
    src: url('../fonts/brandon_reg-webfont.woff2') format('woff2'),
         url('../fonts/brandon_reg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
	background-color: #6abde9;
}

h1{
	font-family:'bg_bold';
	text-align: center;
	color:#fff;
}

h1 span{
	font-family:'bg_regular';
}

h2{
	font-family:'bg_medium';
	text-align: center;
	color:#fff;
}

p{
	font-family: 'bg_medium';
	text-align: center;
	color:#fff;
}

p .textLink{
	color:#fff;
	/*text-decoration: none;*/
}

p span{
	font-family: 'bg_medium_italic';
}

.buttonHolder{
	margin-left:auto;
	margin-right:auto;
	display: flex;
}

.linkButton{
	display: block;
	border: 1px #fff solid;
	border-radius: 8px;
	position: relative;
	width:33.33%;
	padding-top:33.33%;
}

.linkButton svg{
	position: absolute;
	width:80%;
	top:10%;
	left:10%;
} 

.buttonHolder span{
	font-family: 'bg_medium';
	text-align: center;
	color:#fff;
	display: block;
	align-self: center;
	width:33.33%;
}

.linkButton .st1{fill:#FFFFFF;}

.divider{
	margin-left:auto;
	margin-right:auto;
	background-color: rgba(255,255,255,.5);
}

.container{
	margin-left:auto;
	margin-right:auto;
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	h1{
		padding-top: 80px;
		font-size: 16px;
		margin-bottom: 12px;
		letter-spacing: 4px;
	}

	h2{
		font-size: 16px;
		margin-bottom: 30px;
		letter-spacing: 1px;
	}

	p{
		font-size: 16px;
		line-height: 22px;
		margin-bottom:30px;
	}

	p .textLink{
		/*border-bottom: 2px solid #fff;*/
		padding-bottom: 1px;
		letter-spacing: 1px;
	}

	p span{
		letter-spacing: 1px;
	}

	.buttonHolder{
		width:33.33%;
		margin-bottom: 30px;
	}

	.buttonHolder span{
		font-size: 16px;
	}

	.divider{
		width:84px;
		height:2px;
		margin-bottom: 20px;
	}
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1023px){
	.container{
		width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}

	h1{
		padding-top: 120px;
		font-size: 32px;
		margin-bottom: 16px;
		letter-spacing: 6px;
	}

	h2{
		font-size: 32px;
		margin-bottom: 30px;
		letter-spacing: 1px;
	}

	p{
		font-size: 20px;
		line-height: 28px;
		margin-bottom:30px;
	}

	p .textLink{
		/*border-bottom: 3px solid #fff;*/
		padding-bottom: 1px;
		letter-spacing: 1px;
	}

	p span{
		letter-spacing: 1px;
	}

	.buttonHolder{
		width:20%;
		margin-bottom: 30px;
	}

	.buttonHolder span{
		font-size: 20px;
	}

	.divider{
		width:84px;
		height:3px;
		margin-bottom: 30px;
	}
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1024px){
	.container{
		/*width:95.5%;*/
		width:978px;
	}

	h1{
		padding-top: 100px;
		font-size: 40px;
		margin-bottom: 20px;
		letter-spacing: 7px;
	}

	h2{
		font-size: 40px;
		margin-bottom: 40px;
		letter-spacing: 1px;
	}

	p{
		font-size: 24px;
		line-height: 32px;
		margin-bottom:20px;
	}

	p .textLink{
		padding-bottom: 1px;
		letter-spacing: 1px;
	}

	p span{
		letter-spacing: 1px;
	}

	.buttonHolder{
		width:15%;
		margin-bottom: 40px;
	}

	.buttonHolder span{
		font-size: 24px;
	}

	.divider{
		width:84px;
		height:3px;
		margin-bottom: 30px;
	}
}
