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

/* Mid sized screen:  or ((max-device-width: 990px) and (orientation: landscape))*/
@media only screen and (max-width: 977px) and (min-width: 20px){
	.container{
		width: 100%;
		background-size: 100% auto;
	}
	ul.topmenu a.tab{padding: 13px 10px}
	.boxes .col{
		width: calc(34% - 55px);
		padding: 20px 15px;
		margin-right: 15px;
	}
	.homeboxes form input.keywords{width: 80%}
	.header div.logo{
		width: 30%;
   	 	margin: 22px 0 0 2%;
	}
	.header{height: 444px}
	.subheader{height: 339px}
	.ads img{max-width:100%}
}

@media only screen and (max-width: 960px) and (min-width: 20px)
{
	#recaptcha_widget_div{clear: both}
}

@media only screen and (max-width: 922px) and (min-width: 20px)
{
	ul.topmenu a.tab{padding: 13px 7px}
	.header{height: 424px}
	.subheader{height: 319px}
	.boxes .col{
		width: calc(34% - 41px);
		padding: 15px 10px;
	}
}

@media only screen and (max-width: 880px) and (min-width: 20px)
{
	.header{height: 414px}
	.subheader{height: 329px}
	.contact-us input[type=text], .contact-us textarea{width: 95% !important}
	#isubmit label{display:none}
	.listbox .box{
		width: 98%;
		margin-right: 0;
	}
}

/* Switch to Mobile Menu */
@media all and (max-width: 862px) and (min-width: 20px){
	.container{background-position: left -45px}
	.header{
		height:365px;
		z-index: 999;
	}
	.subheader{height:260px}
	.boxes{padding:0}
	.boxes .col{
    	display: table-cell;
    	margin-right: 0;
    	padding: 15px 5px 15px 10px;
    	width: calc(33.33% - 16px);
	}
	.boxes .third{
		padding-right: 10px;
    	width: calc(33.33% - 21px);
	}
	
	/* 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: 0;
  	}
  	#topnav ul a:hover{background-color: inherit}
  	.menu, .menuicon span{display: none}
  	.header p.menuicon{
  		display: block;
		background-image: url(/images/icons/menu-icon.png);
		background-repeat: no-repeat;
		width: 35px;
		height: 30px;
		margin-top: 10px;
		margin-left: 20px;
		float: left;
  	}	
	ul.topmenu li.up{background-image: inherit}
	.menuicon a{
		display: block;
		width: 35px;
		height: 30px;
	}
	ul.topmenu a.tab{
		padding: 13px 0;
		width: 100%;
		color:#fff;
	}
	#nav *:hover ul li:first-child {
		background-image: none;
    	padding-top: 0;
	}
	ul.topmenu li.litab:nth-last-child(2) a{padding-bottom: 34px}
  	ul.topmenu, #topnav ul{height: auto}
  	#topnav ul li.open{
  		display: list-item;
		width: 100%;
  	}
	.openMenu{
  		display: block;
		clear: both;
		width: 100%;
		float: none;
		left: 0;
		background-color: #378079;
  	}
  	.openMenu ul, .openMenu ul li{
  		width: 100%;
		float:none;
		display: block;
  	}
  	#nav li, #nav ul{
  		display: block;
		text-align: left;
		float: none;
  	}
  	ul.topmenu li.litab{
  		width: 100%;
		text-align: left;
  	}
  	.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{top: 0}
  	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;
		clear:both;
	}
	#nav *:hover ul{background-image: inherit}
	#nav li li a, .megamenu li a, .navbtn li li a, #nav ul a{color:#FFF}
	.topmenu li.menu{
		width: 100%;
		clear: left;
		font-size: 24px;
		text-align: left;
	}
	.hidemenu{display: none}
	.mobile-only{display:inherit}
	.endmenu{height: 19px}
}

@media all and (max-width: 832px) and (min-width: 770px){
	.header{height:335px}
	.subheader{height:230px}
}

@media all and (max-width: 770px) and (min-width: 710px){
	.header{height:305px}
	.subheader{height:200px}
}

@media all and (max-width: 710px) and (min-width: 660px){
	.header{height:280px}
	.subheader{height:175px}
}

@media all and (max-width: 660px) and (min-width: 20px){
	.container{background-position:left -10px}
	.header{height:300px}
	.subheader{height:182px}
	.homeboxes .col {
    	margin-right: 0;
    	padding: 10px;
    	width: calc(100% - 20px);
		height: inherit;
		display:block;
	}
	.homeboxes .incol{height: inherit}
	.homeboxes .col p{clear: both}
	.boxes img {height: inherit}
	.footer #nav{
		height: 86px;
		background-color:#000;
	}
	.col1, .col2, .col3, .col4{
		float: none;
		width: inherit;
	}
	.hidemenu, .divider, ul.membermenu{display: none}
	em.i span{
		margin-left: 0;
		width: 90%;
	}
	.homeleft, .homeright{
		float: none;
		clear: both;
		padding: 0 10px;
    	width: calc(100% - 30px); 
	}
	.homeleft{text-align: left}
	.summaryRight{width: 217px}
	.summaryLeft{width: calc(60% - 217px)}
	.summaryMiddle{width: 40%}
	p{
		font-size:1em;
		line-height:1.1em;
	}
	.boxes .homeboxdesc p{font-size:0.9em}
	#nav a, .pagetext, .homeboxes, .footer{
		font-size: 1.3em;     
		line-height: normal;
	}
	#keywords, #nav li li a, .megamenu li a, .navbtn li li a{font-size: 1.2em}
	select, .copy p, .copy p a, .buttonlink a, .buttonlink input[type="submit"], .buttonlink input[type="button"], 
	.buttonlink button, input, button{font-size: 1em}
	#loginform #go{width:auto !important}
	.ads{text-align:center}
	.copy {
    	background-position: 100% -11px;
    	padding: 40px 0 9px;
	}
	.footer .col h4, .footer .col li, .myfootmenu ul li{
		font-size:inherit;
		line-height:inherit;
	}
	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;
		width: calc(100% - 43px);    
		padding: 0 22px 0 21px;
		border: 0;
	} 
	.rightboxes .col{
		border: solid 2px #ccc;
		padding: 10px;
		border-radius: 15px;
	}
	.sub{
		float: none;
		width: calc(100% - 30px);    
		min-height: 170px;
		background-color: #fffdf8;
		padding: 10px 15px;
	}
	.memberbox{
		margin: 10px 0; 
		background-color: #ddeeff;
	}
	.foot-site-map div:nth-child(odd){
    	margin-left: 15px;
		clear: both;
	}
	.footer .col{width: calc(50% - 30px)}
	.myfootmenu{background-image:none}
}

@media all and (max-width: 625px) and (min-width: 594px){
	.header{height:280px}
	.subheader{height:172px}
}

/* Screen Size Below 536px: */
@media all and (max-width: 594px) and (min-width: 20px){
	.header{height:181px}
	.subheader{height:162px}
	#searchbox{padding-right: 10px}
	.upperhead p{display: none}
	#footer ul li{
		display: block;
		padding: 5px;
		clear:both;
	}
	#footer ul li a{border: 0 solid #fff}
	#keywords{padding:13px 15px}
	.summaryCenter{height: auto}
	.sub{float: none}
	.rightboxes{
		float: none;
		border-left: 0;
		min-height: inherit;
	}
	.subtopimage{height: 175px}
	.homearticle{width: calc(100% - 30px)}
	.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;
	}
	.foot-site-map div{
    	margin-left: 15px;
		clear: both;
	}
	.footer .col{
		width: calc(100% - 30px);
		min-height: auto;
	}
	.myfootmenu #nav2 {
    	margin: 0 10px;
    	width: calc(100% - 20px);
	}
	img.poster {
    	float: none;
    	margin: 10px 0;
    	width: 100%;
	}
	.eventSummary {
    	float: none;
    	min-height: 10px;
    	width: calc(100% - 20px);
	}
}

@media all and (max-width: 568px) and (min-width: 520px){
	.header{height:168px}
	.subheader{height:152px}
}

@media all and (max-width: 520px) and (min-width: 20px){
	.header{height:164px}
	.subheader{height:155px}
	.container{background-size: 504px auto}
	.addthis_toolbox{display:none}
}
	
@media all and (max-width: 500px) and (min-width: 20px){
	.listbox .crate ul, .listbox .crate ul li, .memberbox li{margin-left: 0}
}

@media all and (max-width: 450px) and (min-width: 20px){
	#recaptcha_widget_div{
		overflow: hidden;
		width: 100% !important;
	}
	.listbox{width: calc(100% - 40px)}
	.memberbox{margin: 20px 0}
	.summaryLeft{display: none}
	.summaryMiddle{width: calc(100% - 20px)}
	.sub .addlink{float: none}
	.addButton{
		width: 100%;
		float: none;
		margin: 0 0 10px;
	}
	.sub h3 img{ /* This is specifically relevant to the Meet the Team Page */
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
		height: auto !important;
	}
}

@media all and (max-width: 370px) and (min-width: 20px){
	.rightboxes{
		margin: 0 10px;
		padding: 0;
		width: calc(100% - 35px);
	}    
	.header p.menuicon{margin-left: 14px}
	#keywords{width: 129px}
	div.doive2 label, div.doive2 .label{width: calc(100% - 60px)} 
	noscript{display:none}
	.homebanner .appealbox{min-height: 510px}
	.copy {
    	background-image: none;
    	padding: 10px 0 9px;
	}
	.doive2{padding:0}
	.g-recaptcha{
		width: calc(100% -60px) !important;
		overflow-x: hidden;
	}
	.g-recaptcha div div,.g-recaptcha iframe{
		max-width: 100% !important;
		width: 100% !important;
		overflow-x: hidden;
	}
	.listbox{
		padding: 10px !important;
    	width: calc(100% - 30px);
	}
}