/* Conditional Statements */
.mobile-only, .small-only{display: none}

/* Mid sized screen:  or ((max-device-width: 990px) and (orientation: landscape))*/
@media only screen and (max-width: 974px) and (min-width: 20px){
	.container{width: 100%}
	.summaryBtm .percent {
		clear: none;
    	left: 0;
    	top: -65px;
    	width: 60px;
		float: none;
		margin-top: 0;
	}
	.homeboxes .col {
    	margin-right: 10px;
    	padding: 0 10px;
    	width: calc(33% - 26px);
	}
	.homeboxes .third{
		margin-right: 0;
    	width: calc(33% - 20px);
	}
	.homeleft, .sub{
		padding: 0 10px;
		margin-right: 10px;
		width: calc(66% - 22px);
	}
	.our-projects{width: calc(100% - 20px)}
	.homeboxes form input.keywords{width: 80%}
	.header div.logo{
		width: 30%;
   	 	margin: 22px 0 0 2%;
	}
	.summaryLeft .appeal_img img{
		height: auto !important;
		max-height: 120px;
	}
	.homeboxes form input.keywords {width: 75%}
	#recaptcha_widget_div{clear: both}
	.shadows{
		border-radius: 0;
		box-shadow: 0 0 0 #fff;
	}
	#banner, .jcarousel-skin-tango .jcarousel-container-horizontal, .jcarousel-skin-tango .jcarousel-item, .carouselbox{
		height:200px !important;
		min-height:200px;
	}
	.homeright, .homeleft, .homenewsbox{border-radius: 10px}
	.homeright, .rightboxes{
    	padding: 0;
    	width: 33%;
	}
	.homeright{margin: 0}
	.homenewsbox, .catmenubox{
		padding: 0 10px;
		width: calc(100% - 20px);
	}
	.header .upperright{width: calc(100% - 155px)}
	.header .upperright .mymenu{width: calc(100% - 30px)}
	.fb_iframe_widget{
		width: calc(100% - 20px) !important;
		max-width: calc(100% - 20px) !important;
		overflow: hidden;
	}
	.subtopimage{
		width: 100%;
		border-radius: 0;
		background-size: cover;
		background-position: center center;
	}
}

@media only screen and (max-width: 940px) and (min-width: 20px)
{
	ul.topmenu a.tab{padding: 7px 4px}
	#nav *:hover ul{top: 38px}
	.homeicon{max-width: 98%}
	.rightboxes p{
		margin:0;
		padding: 20px 0 0 0 !important;
		width: 100% !important;
	}
	.givingbox img, .poster{
		max-width: 95%;
		height: auto;
	}
}

@media only screen and (max-width: 879px) and (min-width: 20px){
	ul.topmenu a.tab{
		font-size: 1.1em;
		margin-right: 5px;
	}
	#nav a.tab{width: inherit !important}
	#google_translate_element{display: none}
	.contact-us input[type=text], .contact-us textarea{width: 95% !important}
	.summaryLeft{
		width: calc( 60% - 250px);
		float: left;
	}
	.summaryMiddle{width: 40%}
	.pagetext .l, .pagetext .r{
		width: calc(50% - 41px);
		padding: 20px;
	}
	#isubmit label{display:none}
	.listbox .box{
		width: 98%;
		margin-right: 0;
	}
}

@media all and (max-width: 815px) and (min-width: 20px){
	.homeboxes .col {
    	margin-right: 5px;
    	padding: 0 10px;
    	width: calc(33% - 23px);
	}
	.homeright, .rightboxes{width: 32%}
}

/* Screen Size Below 770px: - Move to Mobile Menu */
@media all and (max-width: 770px) and (min-width: 20px){
	.home_wrecker{display: none}
	
	/* Top Menu */
  	body #topnav{
  		height: inherit;
		min-height: inherit;
  	}
  	#topnav ul{
  		position: absolute;
		top: 0;
		width: 100%;
		padding: 7px 0;
		z-index: 100;
		background-color: #000;
  	}
  	body #topnav ul li{display: none}
  	body #topnav ul a{
  		border: 0 solid #000;
		padding-left: 0px;
  	}
  	#topnav ul a:hover{background-color: inherit}
  	.menu{display: none}
  	.menuicon{
  		display: block;
		background-image: url(/images/icons/menu-icon.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 30px;
		height: 25px;
		margin: 10px 10px 10px 0;
		float: right;
		cursor:pointer;
  	}	
	.crumbs {display:none}
	ul.topmenu li.up{background-image: inherit}
	ul.topmenu a.tab {
    	border-radius: 0;
    	box-shadow: none;
	}
	.header{height: 124px}
	.header p.logo{
		width: 15%;
		height: 100px;
		margin-top: 0;
	}
	.header .logo a{
		width: 100%;
		background-size: auto 100%;
		height: 100px;
	}
	.header .upperright .mymenu {width: inherit}
	.breadcrumbs .homelink {
    	float: left;
    	margin-left: 10px;
    	width: calc(100% - 90px);
	}
	.menuicon a{
		display: block;
		width: 35px;
		height: 30px;
	}
  	.menuicon span{display: none}
  	#topnav ul{height: auto}
  	#topnav ul li.open{
  		display: list-item;
		width: 100%;
  	}
	ul.topmenu {height: auto}
  	.openMenu{
		clear: both;
    	display: block;
    	float: none;
    	left: 0;
    	margin: 0;
    	position: absolute;
    	top: 34px;
    	width: 100%;
		z-index: 999;
  	}
	.openMenu li{
		margin: 0;
		padding: 5px;
	}
	.openMenu li a{padding: 10px}	
	.openMenu .menusub{display:none}
  	#nav li, #nav ul{text-align: left}
	#nav li:hover, .navbtn li:hover{position: static}
  	ul.topmenu li.litab{
  		width: 100%;
		text-align: left;
		height:inherit;
  	}
  	.header #nav{
  		display:block;
		text-align:left;
  	}	
  	#nav a.showSub{
  		display: inline-block;
		color: #fff;
		font-weight: bold;
		min-height: 20px;
  	}
  	#nav *:hover ul{padding: 0}
  	body #nav .mobSub{
  		display:none;
		margin-top: 0;
		padding: 10px;
  	}
  	body #nav *:hover ul{margin-top: 44px}
  	body #nav .mobSub, body #nav .mobSub li, body #nav:hover .mobSub li{
  		left: auto;
		top: auto;
		text-align: left;
		width: 90%;
  	}
  	body #nav .openMenu{padding-left: 20px}
  	body #nav .mobSub li{list-style: square}
  	body #topnav .openMenu a{border-right: 0 solid #000}
  	#nav ul, .navbtn ul {
    	left:auto;
    	position: inherit;
    	top:auto;    
		padding: 0;
	}
	#nav ul a{color:#FFF}
 	.footer #nav{
		height: 86px;
		background-color:#000;
	}
	.col1, .col2, .col3, .col4{
		float: none;
		width: inherit;
	}	
	.hidemenu{display:none}
	.topmenu li.menu{
		width: 100%;
		clear: left;
		font-size: 24px;
		text-align: left;
	}
	.mobile-only{display:inherit}
	.divider{display: none}
	#nav a.tab{padding: 10px}
	.upperright ul.openMenu{
		display:block;
		top: 180px;
		position: absolute;
		width: 100%;
		background-color: #000;
		float: none;
		z-index: 999;
	}
	.upperright ul.openMenu li{    
		color: #fff;
    	display: list-item;
    	float: none;
    	font-size: 16px;
    	padding: 10px 25px;
    	text-align: right;
    	text-transform: uppercase;
	}
	.upperright ul.openMenu li a{
		display: block;
		color:#FFF;
	}
	#footer ul li{
		display:block;
		padding: 5px;
		width: calc(100% - 10px);
	}
	#footer ul li a{border-right: 0 solid #fff}
	.sub p.clr{padding-bottom: 0}
	.catmenubox, .catmenubox ul, .givingbox, .resourcebox, .sub p.clr{margin-bottom:0}
	.our-projects .table, .our-projects .tr{display: inline}	
	.our-projects .td{
		width: 45% !important;
		display: inline-block;
	}
	.gallerylink, .gallerylink2{
    	background-size: cover;
    	height: 100px;
    	width: 95%;
	}
}

/* Screen Size Below 752px: */
@media all and (max-width: 752px) and (min-width: 20px){
	em.i span{
		margin-left: 0;
		width: 90%;
	}
	.header p.logo{width: 20%}
	.header .upperright{
		margin-right: 20px;
		width: calc(80% - 20px);
	}
	.homeleft, .homeright, .sub, .rightboxes{
		float: none;
		clear: both;
    	width: 94%;
		margin: 10px 0;
		border-radius: 0;
		height:auto;
		margin: 0;
	}
	.homeleft, .sub{
		padding: 3%;
		text-align: left;
	}
	.homeright, .rightboxes{
		min-height: 50px !important;
		padding: 0;
		width: 100%;
	}
	.homenewsbox, .catmenubox{
		border-radius: 0;
		box-shadow: none;
	}
	.summaryRight{width: 217px}
	.summaryLeft{width: calc(60% - 217px)}
	.summaryMiddle{width: 40%}
	.homeboxes .col {
 	   	margin: 0;
    	padding: 0 10px;
    	width: calc(33.333% - 20px);
		border-radius: 0;
		box-shadow: none;
	}
	/*#banner{display: none}
	.jcarousel-skin-tango .jcarousel-container-horizontal{
		width:100% !important;
		height:100vh; 
	}*/
	
	#banner .jcarousel-skin-tango img{width: 100% !important}
	.footer{
		border:0;
		padding-top:0;
		margin-top:0;
	}
	.sub{min-height: inherit}
	.homenews p {font-size: inherit}
	.sub p:last-child{margin-bottom: 0}
	.sub ul:last-child{
		margin-bottom: 0; 
		padding-bottom: 10px;
	}
}


@media all and (max-width: 685px) and (min-width: 20px){
	input.inputBig, textarea.inputBig, select.inputBig{width: calc(100% - 20px) !important}
	#endDateHour, #endDateMin, #datetimeHour, #datetimeMin{width: 40px !important}
	#loginform .small{
		clear: both;
		display: block;
	}
	#loginform #go{width: auto}
	.rightboxes{
		float: none;
		border: 0;
	} 
	/*.rightboxes .col{
		border: solid 2px #cccccc;
		padding: 10px;
		border-radius: 15px;
	}
	.sub{
		float: none;
		width: calc(100% - 43px);    
		min-height: auto;
	}*/
	.listbox, .memberbox{
		border-radius: 10px;
		box-shadow: 0 0 0 #eee;    
	}
	.memberbox{
		margin: 10px 0; 
		background-color: #ddeeff;
	}
}

/* Screen Size Below 536px: - Font Size Changes */
@media all and (max-width: 594px) and (min-width: 20px){
	/********************/
	.homeboxes .col {
    	margin-right: 0;
    	padding: 0 10px;
    	width: calc(50% - 20px);
		height: inherit;
	}
	.homeboxes .homeboxdesc {height: 150px}
	.homeboxes .third{width:calc(100% - 20px)}
	.homeboxes .third .homeboxdesc {height: 100px}
	.homeboxes .col p{clear: both}
	.homeboxes .col p.homeboxbtn{display:block}
	.homeboxes .col p.homeboxbtn a{
		padding-top:0;
	}
	.homeboxes form input.magnify {float: none}
	/*********************/
	.upperhead p{display: none}
	#footer ul li{
		display: block;
		padding: 5px;
	}
	#footer ul li a{border: 0 solid #fff}
	.pagetext, .homeboxes, .footer {font-size: 1.3em}
	.buttonlink a, .buttonlink input[type="submit"], .buttonlink input[type="button"], .buttonlink button, input, button, select{
		font-size: 1em;
	}
	.homebanner .appealbox{min-height: 565px}
	.copy, .appealbox{font-size: 1.2em}
	.summaryCenter{height: auto}
	ul.membermenu{min-width: 95%}
	.upperright ul.openMenu{top: 129px}
	.sub{float: none}
	.rightboxes{
		float: none;
		border-left: 0;
		min-height: inherit;
	}
	.subtopimage{height: 175px}
	.summaryRight{
		clear: both;
		text-align: center;
		margin: 0 auto;
		float: none;
	}
	.summaryLeft{width: 35%}
	.summaryMiddle{
		width: 65%;
		text-align: center;
	}
	.summaryMiddle .appeal_link{width: 100%}
	.pagetext .l, .pagetext .r{
		width: calc(100% - 41px);
		min-height: inherit;
	}
	form table, form tr, form td{
		display: block;
		width: 100%;
	}
	.app-div{display:none}
	.appeal-info .target, .appeal-info .raised, .appeal-info .give{
		width: 100%;
		display: block;
		text-align: center;
	}	
	body .donatelist li strong, body .donatelist li em{
		width: calc(50% - 44px);	
		text-align: center;
	}
	body .donatelist a:link, body .donatelist a:visited{
		width: calc(100% - 23px);
		margin-bottom: 30px;
		text-align: center;
	}
	.biggerImage{
		background-position: center center;
    	background-size: cover;
    	width: calc(50% - 27px);
		height: 176px;
	}
	.appealstats{width: calc(50% - 20px)}
	.donate-col{
		width: calc(100% - 20px);
		float: none;
		min-height: inherit;
	}
	.productInfo p{float:none !important}
}

@media all and (max-width: 512px) and (min-width: 20px){
	.listbox .crate ul, .listbox .crate ul li, .memberbox li {margin-left: 0}
	.header p.logo{width: 25%}
	.header .upperright{
		margin-right:0;
		width: 75%;
	}
	.header .mission{font-size: 18px}
	.subtopimage{display:none}
	.homeboxes .homeboxdesc {height: 160px}
}

@media all and (max-width: 450px) and (min-width: 20px){
	.homeboxes .col {
    	margin: 5px 20px;
    	padding: 0 10px;
    	width: calc(100% - 60px);
		height: inherit;
		float:none;
		display:inline-block;
		border-radius: 4px;
	}
	.homeboxes .col p{display: none}
	.homeboxes .col p.homeboxbtn{text-align:right}
	.homeboxes .col p.homeboxbtn a{display:inline}
	#banner{margin-bottom:5px}
	.homeleft{margin-top:5px}
	.homeboxes .third .homeboxdesc, .homeboxes .homeboxdesc {height: inherit}
	table, tr, td{
		display: block;
		width: 100%;
	}
	.shop table td{width: 100% !important}
	#recaptcha_widget_div{
		overflow: hidden;
		width: 100% !important;
	}
	.listbox{width: calc(100% - 40px)}
	.memberbox{margin: 20px 0}
	img.appeal_img{
    	width: 50px;
		height: 50px !important;
	}
	.summaryLeft{display: none}
	.summaryMiddle{width: calc(100% - 20px)}
	.sub .addlink{float: none}
	.addButton{
		width: 100%;
		float: none;
		margin: 0 0 10px 0;
	}
	.payNow{
		width: 100%; 
		float:none;
		margin: 0;
	}
	.payNow button{width: calc(100% - 10px)}
	body .donatelist li strong, body .donatelist li em{width: calc(100% - 44px)}
	.our-projects .td{width: 95% !important}
	.trackList .table, .trackList .tr, .cartList, .cartList .tr{display:block}
	.trackList .td, .cartList .td{display:inline}
	.trackList p.tr:nth-child(1), .cartList p.tr:nth-child(1){display:none}
	.trackList p.tr:nth-child(odd), .cartList p.tr:nth-child(odd){background-color:#f5f5f5; padding:3px}
	.trackList .demo{clear:both; display:inline-block}
	.trackList strong, .cartList .full-only{display:none}
	.productRight, .productMain{
		width:100%;
		float:none; 
		padding:0; 
		height:inherit;
	}
	.productRight .gallerylink, .productRight .gallerylink img{min-height: inherit;height:inherit}
	.small-only{display:inherit}
}

@media all and (max-width: 420px) and (min-width: 20px){
	.header p.logo{width: 100px}
	.header .upperright{
		margin-right:0;
		width: calc(100% - 110px);
	}
	.pagetext img{
		max-width: 85% !important;
		width: 85% !important;
	}
	.shopImage{height:auto}
	.subcat-img{
		width: 100%;
		background-size: cover;
	}
	.appealstats{width: calc(100% - 20px)}
	.jp-audio .jp-type-single .jp-toggles{display:none}
}

@media all and (max-width: 370px) and (min-width: 20px){
	body .pagetext *{text-align: left}
	body .pagetext .ads{text-align: center}
	body .pagetext .ads img{width: 100%}
	.rightboxes{padding: 0}
	div.doive2 label, div.doive2 .label{width: calc(100% - 60px)} 
	#recaptcha_area, #recaptcha_table {width: calc(100% -60px) !important}
	noscript{display:none}
	.productList .grid{
		width:100% !important; 
		display:block;
	}
	.homenewsimg, .shopImage, .shopDesc{
		float: none;
		width: 100%;
	}
	.pagetext .homenewsimg img{
		width: 100% !important;
		max-width: 100% !important;
	}
	.addthis_toolbox{
		display: block;
    	float: none !important;
    	width: 100% !important;
	}
	#loginform{width: calc(100% - 60px)}
}

@media all and (max-width: 305px) and (min-width: 20px){
	.homeleft{width: 90%}
	.signup-side{
		width: calc(100% - 70px);
		margin-bottom: 0;
	}    
	.homeleft, .sub{
		width: calc(100% - 20px);
		padding: 10px;
		margin:0;
	}
	body .pagetext .ads{text-align:left} 
	.social,.fb_iframe_widget{display:none}
}