body { font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; margin:0px; padding:0px;background-color:#ffffff; }
#landscape { display:none; }
#landscape h2 { color:#E30613; }
#wrapper {
	font-size:20px;
	width:100%;
	margin:0px auto;
}
#level0, #level1, .level2, #level3 {
	sborder-left:1px solid #ffffff;
	
	position:absolute; 
	width:100%; 
	height: 100%;
}
header { 
	background-color:#ffffff; height: 71px;
	position: fixed;
	width:100%;

}

#level0 { display:none; }
div.iespacer { height:71px; }

header div, header h1 { float:left; }
header div.back { width:auto; font-size:3rem;padding:10px 10px 0px 10px; cursor: pointer;}
header div.img img {width: 130px; padding: 11px 11px 0px 11px }
header div.title { padding:10px 0px 0px 10px; }
header p { padding:0px; margin:0px; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
header p.p1 { font-size:1.8rem; line-height:0.8; text-transform: uppercase; font-weight:bold; color:#e30613; }
header p.p2 { font-size:1.5rem;  }

main div.category { cursor: pointer; float:left; width: 11.3%; min-height: 219px; padding: 0px 10px;  border-right:1px solid #efefef; border-bottom:1px solid #efefef; text-align:center;     background-color: #e30613; }
main div.category img { width:150px; margin:10px 0px 4px 0px; }
main div.category p { color:#ffffff; padding:0px 2px; margin:0px; font-size:1rem; line-height:1; text-transform: uppercase; font-weight:bold; min-height:28px; }

#level0 { z-index:1; background-color:#ffffff; height:100%;background-image: url('../assets/img/blocks.gif'); background-repeat:no-repeat; sbackground-size:contain; background-position:bottom; }
#level1 { z-index:2; /* display:none; */ }
.level2 { height:100%;background-color:#ffffff; z-index:3; display:none; }
#level3 { background-color:#ffffff; z-index:4; display:none; text-align:center; }



.level2 main div.title { font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; background-color:#e30613; padding:10px; dbackground-image: url('../assets/img/bg.png'); background-repeat: no-repeat; background-position: right bottom; }
.level2 main div.title p { font-size:1.8rem;margin:0px; color:#ffffff; text-transform: uppercase; font-weight:bold; }
.level2 div.range { border-bottom:1px solid #e30613; background-color:#ffffff; min-height:100px; }
.level2 div.range a { float:right; color:#000000;font-weight:bold; font-size:3rem; margin:17px 6px 0px 0px; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
.level2 div.range a:hover { color:#e30613; }
.level2 div.range img { float:left; height:60px; padding:10px; }
.level2 div.range div.content { margin:5px 50px 5px 40px; }
.level2 div.range h3 { font-size:1.5rem;text-transform: uppercase; color:#e30613;font-weight:bold; margin:5px 0px 0px 0px; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
.level2 div.range p, .level2 div.range li { font-size:1rem; margin:2px 0px 0px 0px; }
.level2 div.range ul { font-size:11px; margin:0px 0px 0px 60px; padding:0px; }

a.range2 {
    display: block;
	border-bottom: 1px solid #e30613;
	background-color:#ffffff;
	background-repeat: no-repeat;
    background-position: top 20px left 20px;
	background-size: 300px;
	padding: 20px 15px 20px 320px;
    text-decoration:none;
	color:#000000;
	min-height:320px;
	margin-top: 0px;
}
a.range2 h3 { font-size:1.5rem;text-transform: uppercase; color:#e30613;font-weight:bold; margin:5px 0px 0px 0px; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
a.range2 p, a.range2 li { font-size:1rem; margin:2px 0px 0px 0px; }
a.range2 ul { margin-top:0px;margin-bottom:0px; }
a.range2:hover { background-color:#efefef; }
main div.category:hover, div.homebtn:hover { background-color:#F92B37; }



.range5 { margin:10px auto; border-bottom:1px solid #cccccc; min-height:200px; max-width: 1400px; background-color:#ffffff; }
.rangeimg { float:left; width:200px; margin-left:20px; }
.rangedesc { margin: 20px 0px 20px 240px; }
.rangedesc h3 { font-size:1.8rem; color:#e30613; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-transform: uppercase; margin:10px 0px; }
.rangedesc h4, .rangedesc p { font-size:1.0rem; margin:10px 0px; }
.rangedesc .desc1, .rangedesc .desc2 { width:40%; float:left; margin-right:20px; }
.rangelink { float:right; margin:10px 0px 20px 30px; }
.rangelink a, .homebtn { background-color:#e30613; color:#ffffff; padding:10px 25px; margin:50px 0px; text-decoration: none; border-radius: 5px; }
.rangelink a:hover { background-color:#F92B37; }
a.catlink { background-color:#000000; color:#ffffff; font-size:15px; text-transform: none; padding:10px 25px; text-decoration: none; border-radius: 5px; margin: 0px 0px 0px 20px; display: inline-block; }
a.catlink:hover { background-color:#ffffff; color:#000000; }



.instructions {
	color:#ffffff;
	background-color:#000000;
	font-size:0.8rem;
}
.instructions p {margin:0px 0px 4px 0px;}
.instructions .r1 { margin:0px auto; /*max-width:1400px;*/ padding:10px 10px 6px 10px;  }
.instructions .c1 { float:left;font-weight:bold; }
.instructions .c2 { margin-left:100px; }


#level0 main { text-align:center; padding: 30px 20px  20px 20px;  }
img.homelogo { margin-bottom:80px; }
#level0 h1 { font-size:1.8rem; color:#e30613; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-transform: uppercase; margin:0px; }
#level0 h2 { font-size:1.5rem; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; margin:0px; font-weight:normal; }
div.homebtn { background-color:#E30613; color:#FFFFFF; font-size:1.5rem; display:inline-block; padding:8px 12px; font-family: Century Gothic, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-transform: uppercase; margin:0px; font-weight:bold; margin:40px 0px; cursor: pointer}

#landscape { text-align:center; padding:20px; }
#landscape div { display:inline; }
#landscape div img { margin-bottom:0px; height:50px; }





@media only screen and (max-width: 1500px) {
	main div.category { width:13%; }
	main div.category p { font-size:0.7rem; }
	main div.category img { width:100%; }
}


@media only screen and (max-width: 870px) {
	.rangedesc .desc1, .rangedesc .desc2 { width:100%; }
}



@media only screen and (max-width: 600px) {
	
	.rangelink { float:none; width:100%; margin:30px 0px; text-align: center; }
	
	
	#wrapper {
		width:100%;height:100%;
	}
	#level1, .level2, #level3 {
		width:100%;height:200%;
	}
	#level0 {
		width:100%;
	}
	header div.img img { height:30px; width:auto; padding:20px 0px 0px 0px; }
	header div.title { padding:20px 0px 0px 10px; }
	header p.p1 { font-size:1.2rem;}
	header p.p2 { font-size:1rem;  }
	main div.category { width: 27%; min-height: 130px; }
	main div.category img { width:60px; margin-top:5px; }
	main div.category p { font-size:0.8rem; }
	img.homelogo { margin-bottom:40px; }
	.level2 main div.title p { font-size:1.1rem; }
	a.range2 { background-size: 60px; padding: 0px 5px 0px 80px; min-height:80px; }
	a.range2 h3 { font-size:1.0rem; }
	a.range2 p, a.range2 li { font-size:0.8rem; margin:2px 0px 2px 0px; }
	a.range2 ul { padding-left:12px; }
	
	.rangeimg { float:none; margin:0px auto; }
	.rangedesc { margin: 20px 20px 20px 20px; }
	
	
}


/* landscape mode  */

@media (max-width:900px) and (min-width:400px) {
	
	
}

@media only screen 
	and (max-device-width: 1112px) 
	and (orientation: landscape)
{
		#landscape { display:block; }
		#wrapper, #level0, #level1, .level2, #level3  { display:none; }
}