/*  MAKE LAYOUT RESPONSIVE at 568px FOR IPHONE  ============================================ */

#maincontent, .maincontent{
	width: 100%;
}
#logo{width: 240px; height: 53px;margin: 50px 10px 0px 5px;}
#logo a{ width: 240px; background-size: 240px 53px;}
.utility-nav{ display:none;}
#navigation{ display:none;}

#carousel-holder .prev{ left:0;} 
#carousel-holder .next { right:0}
.header-buttons.col{ float:none; margin:0; position: absolute; top:0; left:0px; width:100%; margin: 0 auto;}
.header-donate, .header-ticket, .header-subs{width: 33.3%; padding:0; height: 35px; line-height:35px;float: left; text-align:center; margin:0px;}
.mobile-nav{ display:block;}

.ico { display: block; font-size: 0; line-height: 0; text-indent: -4000px; background: url(images/icons-nav.jpg) no-repeat 0 0; position: absolute; top: -50px; }

.inner-navigation { padding: 15px 5px 5px; margin: 0; position: relative; height:35px; top:100px; }
.inner-navigation a.back-btn,
.inner-navigation a.nav-trigger { width: 52px; height: 39px; position: relative; display: inline; }
.inner-navigation a.back-btn .ico,
.inner-navigation a.nav-trigger .ico { left: 60%; }
.inner-navigation a.back-btn { float: left; }
.inner-navigation a.nav-trigger { float: right; }
.inner-navigation a.back-btn .ico { width: 9px; height: 16px; margin: -8px 0 0 -5px; }
.inner-navigation a.nav-trigger .ico { width: 52px; height: 39px; margin: -10px 0 0 -40px; }
.inner-navigation .mobile-navigation { position: absolute; top: 30%; left: 0; right: 0; display: none; }

.mobile-navigation { padding-bottom: 9px; z-index: 999;}
.mobile-navigation ul { list-style: none outside; background: #f86a2b; padding: 0;}
.mobile-navigation ul.nav li { border-right:0px; display:block;}

.mobile-navigation ul li:first-child { border-top: 0; }
.mobile-navigation ul li:last-child { border-bottom: 0; }
.mobile-navigation ul li a { font-size: 14px; line-height: 20px; color: #fff; text-transform: uppercase; text-decoration: none; padding: 9px 0px; position: relative; display: block;border-bottom: 1px solid #ffb32b; margin:0 22px;}
.mobile-navigation ul li:last-child > a { border-bottom-color: transparent; }
.mobile-navigation ul li:last-child.clicked { border-bottom: 1px solid #fff; }
.mobile-navigation ul li:last-child.clicked > a { border-bottom-color: #303131; }
.mobile-navigation ul li a .ico { width: 9px; height: 16px; background-position: -76px -19px; right: 19px; margin-top: -8px; }
.mobile-navigation ul li.clicked a .ico { width: 16px; height: 9px; background-position: -88px -19px; right: 15px; margin-top: -5px; }
.mobile-navigation ul ul { background: #fff; display: none; padding-left: 40px; }
.mobile-navigation ul ul li a {padding-left: 0; color:#000;}

.bottom-panel{display: none;}
.bottom-panel-mob{display: block; width:100%;}

.bottom-panel-mob .header-donate, .bottom-panel-mob .header-ticket, .bottom-panel-mob .header-subs{ width: 33.3%; padding:0; height: 35px; line-height:35px; margin:0; display:block; float: left; text-align:center; font-size:14px;}

#slider .container{ width:203px;}
#slider .container, #slider li{}
#slider li img{}
#slider .prev2, #slider .next2{ background: url("images/carousel1-icons.jpg") no-repeat 0 0; top:294px;}
#slider .next2{ right: 19px; background-position: -43px 0;} 
#slider .prev2{left:20px;}

.breadcrumbs{padding:0 4%}

#widecolumn,#sidebar{width:92%; padding:4%}
#sidebar, .rollover{ margin: 0 auto; text-align:center;}
.displace{ position:relative; }
.widgettitle, ul.links a, ul.links{text-align:left;}
.featured-image{margin-top: 15px}
.featured-image h2{position:relative; top:0}



.mob-search{display: block; background:#fb912c;}
#search{ float:none; margin:-6px auto 0; display: block; width:63.8%; height: 25px; padding:10px 0;}
#search .field{ width: 80%; height:23px; border-radius:10px; padding-left: 10px;}
#search .submit {margin:4px 0 0 6px;}

/* #carousel-holder{ display:none;} */
/* .home-banners{display:none;} */
#footer{width:100%; margin: 0px auto; border: 0px;}
#footer .socials{ width:30%; height:45px; margin:0 auto; float: none; text-align:center; clear:both; }
#footer .socials li{}
#footer p{padding: 15px;}
#footer p.ac{border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;}
#widecolumn-tnew{ padding:15px 15px 30px;}



/*  GRID OF EIGHT TURNS INTO A GRID OF FOUR */

.span_8_of_8 {
	width: 100%; 
	margin-left: 0;
}

.span_7_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_6_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_5_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_4_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_3_of_8 {
	width: 74.2%;
	margin: 1% 0 1% 3.2%;
}

.span_2_of_8 {
	width: 48.4%;
	margin: 1% 0 1% 3.2%; 
}

.span_1_of_8 {
	width: 22.6%;
	margin: 1% 0 1% 3.2%; 
}

.span_1_of_8:nth-child(4n+1) { 
	clear: both;
	margin-left: 0;
}
		
/*  Except in the Example and in the Sample */

#example .maincontent .span_8_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_7_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_6_of_8 {
	width: 100%;
	margin-left: 0; 
}
#example .maincontent .span_5_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_4_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_3_of_8 {
	width: 100%;
	margin-left: 0; 
}
#example .maincontent .span_2_of_8 {
	width: 100%%; 
	margin-left: 0;
}
#example .maincontent .span_1_of_8 {
	width: 100%; 
	margin-left: 0;
}

#sample .maincontent .span_8_of_8 {
	width: 100%; 
	margin-left: 0;
}
#sample .maincontent .span_7_of_8 {
	width: 100%; 
	margin-left: 0;
}
#sample .maincontent .span_6_of_8 {
	width: 100%;
	margin-left: 0; 
}
#sample .maincontent .span_5_of_8 {
	width: 100%; 
	margin-left: 0;
}
#sample .maincontent .span_4_of_8 {
	width: 100%; 
	margin-left: 0;
}
#sample .maincontent .span_3_of_8 {
	width: 100%;
	margin-left: 0; 
}
#sample .maincontent .span_2_of_8 {
	width: 100%%; 
	margin-left: 0;
}
#sample .maincontent .span_1_of_8 {
	width: 100%; 
	margin-left: 0;
}

@media screen and (max-width: 568px) and (min-width: 481px) {
	#slider .prev2{left: 143px;}
	#slider .next2{right: 142px;}

}

@media screen and (max-width: 480px) and (min-width: 321px) {
	#slider .prev2{left: 99px;}
	#slider .next2{right: 98px;}

}