html,body{
	height:100%;
}

body{
	background:#06093a;
}

.hp-wheel{
    color: #06093a;
    width: 21rem;
    height: 21rem;
    margin-top: 1rem;
    box-sizing: content-box;
    font-size: 2.7em;
    font-weight: bold;
    text-transform: uppercase;
}

.wheel-div:hover .hp-wheel, .hp-wheel:hover{
	border:1rem solid #fff965;
	color:#ff5722;
}

.responsive-flex{
	display:flex;
	flex-direction:column;
}

.main-div .clickarea{
	position: absolute;
    width: 25em;
    height: 22em;
    z-index:1;
    margin-left: 7rem;
}

.top-panel{
	background:#d5d5d5;
	height:200px;
	display:flex;
}

.top-panel .clickarea{
	box-sizing: content-box;
	width:200px;
	height:200px;
	position: absolute;
	z-index:1;
}

.top-panel-div{
	width:200px;
	height:200px;
}

.top-panel-icon{
	height:100%;
	width:auto;
}

.pdfbutton{
	width:100%;
	background:#fff;
	font-size:2em;
	padding:0.3em;
	margin-bottom:1em;
	font-weight:bold;
	text-transform:uppercase;
}

.pdflist a{
	color:#06093a;
	text-decoration:none;
}

.pdflist .clickarea{
    position: absolute;
    width: 100%;
    height: 67px;
}

@media (min-width: 992px) {
	.responsive-flex{
		flex-direction:row;
	}
	
	.wheel-div{
		flex:1;
		text-align:center;
	}
	
	.main-div{
		height:100%;
	}
	
	.wheel-inner{
		top: 50%;
	    position: relative;
	    transform: translateY(-50%);
	}
}


.headerText{
	text-align: center;
    margin-top: 100px;
    color: #fff;
    font-size: 60px;
}