<!-- Custom CSS for download and software page -->


@media screen and (min-width: 1px) and (max-width: 280px){
	.thebox {
		width:280px;
	}
}
@media screen and (min-width: 399px) and (max-width: 746) {
	.thebox {
		width:400px;
	}
}
@media screen and (min-width: 747px) and (max-width: 938px) {
	.thebox {
		width:748px;
	}
}
@media screen and (min-width: 939px) {
	.thebox {
		width:940px;
	}
}


@media screen and (min-width: 1px) {
	.lvl1 {
		background-image: url("/wp-content/uploads/LakotaCover1.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 2% 5px 4% 5px;
		float: left;
		width: 230px;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl1 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl1:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl1:hover {
		background-image: none;
		background: #B7432B;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl2 {
		background-image: url("/wp-content/uploads/LakotaCover2.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 2% 5px 4% 5px;
		float: left;
		width: 230px;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl2 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl2:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl2:hover {
		background-image: none;
		background: #FFB93B;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl3 {
		background-image: url("/wp-content/uploads/LakotaCover3.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 2% 5px 4% 5px;
		float: left;
		width: 230px;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl3 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl3:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl3:hover {
		background-image: none;
		background: #1155A6;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl4 {
		background-image: url("/wp-content/uploads/LakotaCover4.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 2% 5px 4% 5px;
		float: left;
		width: 230px;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl4 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl4:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl4:hover {
		background-image: none;
		background: #45B748;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl5 {
		background-image: url("/wp-content/uploads/LakotaCover5.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 2% 5px 4% 5px;
		float: left;
		width: 230px;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl5 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl5:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl5:hover {
		background-image: none;
		background: #862991;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
}


@media screen and (min-width: 747px) and (max-width: 938px) {
	.lvl1 {
		background-image: url("/wp-content/uploads/LakotaCover1.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl1 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl1:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl1:hover {
		background-image: none;
		background: #B7432B;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl2 {
		background-image: url("/wp-content/uploads/LakotaCover2.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl2 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl2:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl2:hover {
		background-image: none;
		background: #FFB93B;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl3 {
		background-image: url("/wp-content/uploads/LakotaCover3.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl3 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl3:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl3:hover {
		background-image: none;
		background: #1155A6;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl4 {
		background-image: url("/wp-content/uploads/LakotaCover4.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl4 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl4:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl4:hover {
		background-image: none;
		background: #45B748;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl5 {
		background-image: url("/wp-content/uploads/LakotaCover5.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 290px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl5 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl5:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl5:hover {
		background-image: none;
		background: #862991;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
}


@media screen and (min-width: 939px) {
	.lvl1 {
		background-image: url("/wp-content/uploads/LakotaCover1.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 360px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl1 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl1:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl1:hover {
		background-image: none;
		background: #B7432B;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl2 {
		background-image: url("/wp-content/uploads/LakotaCover2.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 360px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl2 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl2:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl2:hover {
		background-image: none;
		background: #FFB93B;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl3 {
		background-image: url("/wp-content/uploads/LakotaCover3.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 360px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl3 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl3:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl3:hover {
		background-image: none;
		background: #1155A6;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl4 {
		background-image: url("/wp-content/uploads/LakotaCover4.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 360px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl4 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl4:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl4:hover {
		background-image: none;
		background: #45B748;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl5 {
		background-image: url("/wp-content/uploads/LakotaCover5.jpg");
		background-size: 100%;
		background-repeat: none;
		margin: 4% 10% 4% 10%;
		float: left;
		width: 30%;
		height: 360px;
		transition: background 1s;
		-o-transition: background 1s;
		-moz-transition: background 1s;
		-webkit-transition: background 1s;
		transition: transform 1s;
		-o-transition: transform 1s;
		-moz-transition: transform 1s;
		-webkit-transition: transform 1s;
	}
	.lvl5 h2{
		display: none;
		position: relative;
		margin-top:50% !important;
		padding: 10px 0px 10px 0px;
		text-align: center;
		background: rgba(255,255,255,.5) !important;
	}
	.lvl5:hover h2{
		display: block !important;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
	.lvl5:hover {
		background-image: none;
		background: #862991;
		transition: background 1s ease-in;
		-o-transition: background 1s ease-in;
		-moz-transition: background 1s ease-in;
		-webkit-transition: background 1s ease-in;
		transform: rotatey(180deg);
		-o-transform: rotatey(180deg);
		-moz-transform: rotatey(180deg);
		-webkit-transform: rotatey(180deg);
	}
}