.bluetxt {
	color: #00205B !important;
}
.lightbluetxt {
	color: #00AFEF !important;
}
.orangetxt {
	color: #F58625 !important;
}
.lightbluebg {
	background-color: #00AFEF;
}
.darkbluebg {
	background-color: #00205B;
}
.orangebg {
	background-color: #F58625;
}
.whitetxt {
	color: #FFFFFF;
}
.mobileonly {
	display: none;
}
.dtoponly {
	display: inline-block;
}
h1.whitetxt, h2.whitetxt, h3.whitetxt, h4.whitetxt, h5.whitetxt {
	color: #FFFFFF !important;
}
.diagonal {
	clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
	padding: 20px 120px 14px 20px;
}
.imginline {
	display: inline-block;
	vertical-align: middle;
}
.faimg {
	float: left;
	margin-right: 20px;
}
.fabttn {
	width: 340px;
	text-align: center;
}
.fcol {
	border-right: 1px solid #EEEEEE;
}
.fcbttn {
	display: inline-block;
	float: left;
	width: 33.3%;
	padding: 3px;
}
.fcbttn a {
	display: block;
	opacity: 1;
}
.fcbttn a:hover {
	opacity: 0.8;
}
.fcbttn a img {
	display: block;
	width: 100%;
	height: auto;
}
.levelimg, .leveldesc {
	display: inline-block;
	float: left;
}
.levelimg {
	width: 160px;
	margin-right: 40px;
}
.levelimg img {
	width: 160px;
}
.leveldesc {
	width: calc(100% - 200px);
}


@media only screen and (max-width: 1070px) {

}

@media only screen and (max-width: 930px) {
.diagonal {
	padding: 20px 100px 14px 20px;
}
}

@media only screen and (max-width: 800px) {
.diagonal {
	padding: 20px 80px 14px 20px;
}
}

@media only screen and (max-width: 727px) {

}

@media only screen and (max-width: 600px) {

}

@media only screen and (max-width: 550px) {
.diagonal {
	padding: 20px 70px 18px 20px;
}
.faimg {
	float: none;
	margin-right: 0;
	margin-bottom: 10px;
	text-align: center;
}
.fabttn {
	width: 100%;
}
}

@media only screen and (max-width: 400px) {
.diagonal {
	padding: 20px 60px 18px 20px;
}
}

@media only screen and (max-width: 370px) {

}

@media only screen and (max-width: 350px) {

}
/* iphone5 */
@media only screen and (max-width: 320px) {

}
/* ipad */
@media only screen and (width: 768px), (height: 1024px) {

}