/* Pyramid Styles ======================= */
.left-align {
	text-align: left}

.right-align {
	text-align: right}
	
.center-align {
	text-align: center}

#pyramid-container {
	width: 620px;
	height:570px;
	margin: 20px auto;
	font-size: 12px;
	line-height: 1.2em}

ul#pyramid,
ul#pyramid li ul,
ul#pyramid li {
	margin: 0;
	padding: 0;
	list-style: none}
	
ul#pyramid {
	text-align:center;
	height:570px;
	width:620px;
	background:#fff;
	margin:0}	
	
ul#pyramid #pyramid-top,
ul#pyramid #pyramid-middle,
ul#pyramid #pyramid-bottom {
	position:relative;
	background:pink url(../img/site/pyramid-trans-on-white.png) no-repeat 0 0;
	width:100%}	

ul#pyramid li h5 {
	text-align: center;
	color: #fff;
	font-size: 22px;
	border-bottom:1px solid rgba(255,255,255,.25);
	margin:0;
	padding:0;
	line-height:0}

ul#pyramid ul {
	position:relative}

ul#pyramid li,
ul#pyramid li ul li {
	overflow:auto;
	display:block}

ul#pyramid li ul li {
	width:110px;
	height:110px;
	background:transparent;
	display:inline-block;
	position:relative}
	
	ul#pyramid li ul li a {
		color: #fff;
		text-decoration: none;
		display:block;
		padding:10px;
		font-size:14px;
		position:absolute;
		top:0; bottom:0; left:0; right:0}
			
		ul#pyramid li ul li a:hover {
			background-color:rgba(255,255,255,.25)}	

ul#pyramid #pyramid-top {
	height: 223px;
	background-color:rgba(187,32,37,1);
	background-position:0 0}
	
	ul#pyramid #pyramid-top:hover {
		background-color:rgba(187,32,37,.85);}
	
	ul#pyramid #pyramid-top li {
		height:80px}
		
		ul#pyramid #pyramid-top li a {
			padding-top:40px}
	
	ul#pyramid #pyramid-top h5 {
		padding:105px 0 30px 0}
		
		ul#pyramid #pyramid-top li:first-child {
			width:138px;
			margin-left:-40px}
			
		ul#pyramid #pyramid-top li:last-child {
			width:128px;
			margin-right:-40px}			

ul#pyramid #pyramid-middle {
	height: 183px;
	background-color:rgba(43,81,102,1);
	background-position:0 -222px;}
		
	ul#pyramid #pyramid-middle:hover {
		background-color:rgba(43,81,102,.85)}

	ul#pyramid #pyramid-middle h5 {
		padding: 34px 0 35px}
		
		ul#pyramid #pyramid-middle li:first-child {
			width:160px;
			margin-left:-40px}
			
			ul#pyramid #pyramid-middle li:first-child a {
				padding-top:40px}
			
		ul#pyramid #pyramid-middle li:last-child {
			width:160px;
			margin-right:-40px}	
			
			ul#pyramid #pyramid-middle li:last-child a {
				padding-top:40px}
				
		ul#pyramid #pyramid-middle li:last-child span {
			display:inline-block;
			width:100px}					
		
ul#pyramid #pyramid-bottom {
	height: 165px;
	background-color:rgba(70,139,55,1);
	background-position:0 100%}
	
	ul#pyramid #pyramid-bottom:hover {
		background-color:rgba(70,139,55,.85)}
	
	ul#pyramid #pyramid-bottom li {
		height:92px}
		
	ul#pyramid #pyramid-bottom li a {
		padding-top:20px}	

	ul#pyramid #pyramid-bottom h5 {
		padding:35px 0 33px 0}
		
		ul#pyramid #pyramid-bottom li:first-child {
			width:138px;
			margin-left:-40px}
			
		ul#pyramid #pyramid-bottom li:last-child {
			width:138px;
			margin-right:-40px}
				
			ul#pyramid #pyramid-bottom li:last-child span {
				display:inline-block;
				width:100px}		

ul#pyramid li ul li a:hover {
	color: #000}

ul#pyramid #pyramid-top ul li:first-child a {
	background-position: 35% 0 !important}	
	
ul#pyramid #pyramid-top ul li:last-child a {
	background-position: 50% 0}	
	
@media (max-width: 768px) {
#pyramid-container {
	width: auto;
	height:570px;
	margin: 20px auto}	
	
ul#pyramid {
	height:570px;
	width:auto}
	
ul#pyramid #pyramid-top,
ul#pyramid #pyramid-middle,
ul#pyramid #pyramid-bottom {
	background-image:none;
	height:auto;
	padding:0;
	margin:0;
	overflow:hidden}		

ul#pyramid li h5 {
	padding:20px !important;
	line-height:1}
.left-align, .right-align, .center-align  {
	text-align: center}
ul#pyramid li {margin-bottom:-10px; padding-bottom:0}
ul#pyramid li {font-size:0}
ul#pyramid #pyramid-top li    {width:50% !important}	
ul#pyramid #pyramid-middle li {width:33.33% !important}	
ul#pyramid #pyramid-bottom li {width:20% !important}
ul#pyramid ul li {border:solid rgba(255,255,255,.25); border-width:0 1px 0 0;}
ul#pyramid ul li a {width:100%!important; padding:20px 10px !important;font-size:16px !important;line-height:1.1}
ul#pyramid #pyramid-bottom li span {width:auto!important}	
	}