/* @override 
	http://dev.aiatucson.arizona.edu/sites/aiatucson.arizona.edu/themes/at_aia/css/responsive.custom.css?ohqayq
	http://dev.aiatucson.arizona.edu/sites/aiatucson.arizona.edu/themes/at_aia/css/responsive.custom.css?ohxygq
	http://dev.aiatucson.arizona.edu/sites/aiatucson.arizona.edu/themes/at_aia/css/responsive.custom.css?okpexc
	http://dev.aiatucson.arizona.edu/sites/aiatucson.arizona.edu/themes/at_aia/css/responsive.custom.css?okpgp8
	http://dev.aiatucson.arizona.edu/sites/aiatucson.arizona.edu/themes/at_aia/css/responsive.custom.css?okpx1a
	http://dev.aiatucson.arizona.edu/sites/aiatucson.arizona.edu/themes/at_aia/css/responsive.custom.css?oldv8n */

/*
 * responsive.custom.css is for custom media queries that are not set via the
 * theme settings, such as cascading media queries.
 *
 * By default all the other responsive stylesheets used in Adaptivetheme use a
 * "stacking method", however cascading media queries use a waterfall method so
 * you can leverage the cascade and inheritance for all browsers that support
 * media queries.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable go to your theme settings and
 * look under the "CSS" settings tab.
 */

/*
 * Really small screens and up
 */
/* @media only screen and (min-width: 220px) {} */

/*
 * Smalltouch sizes and up
 */
/* @media only screen and (min-width: 320px) {} */

/*
 * Smalltouch sizes and down
 */
@media only screen and (max-width: 480px) {
  /* 
   * Float Region Blocks - custom media query CSS example:
   * 
   * Float regions blocks is an Extension you can enable in the appearance
   * settings for your theme. This feature allows you to automatically float
   * blocks in regions, you can switch it on and off depending on your
   * requirements. For design purposes you many want to remove the floats for
   * devices where the entire theme is just one column - for example small
   * mobile phones. The following CSS is inside the custom media query:
   *
   *   @media only screen and (max-width: 480px){}
   *
   * This will target devices with a maximum width of 480px - most small phones.
   * In these smaller screen sizes we can remove the float and widths so all
   * blocks stack instead of displaying horizonally. The selector used is an
   * "attribute selector" which will match on any float block class. Use your
   * inspector or Firebug to get the classes from the page output if you need
   * more granular control over block alignment and stacking.
   */
  .region[class*="float-blocks"] .block {
    float: none;
    width: 100%;
  }
}

/*
 * Tablet sizes and up
 */
/* @media only screen and (min-width: 768px) {} */

/*
 * Desktops/laptops and up
 */
/* @media only screen and (min-width: 1025px) {} */


/* Breakpoint 1 @ 1024px */
@media only screen and (max-width:1024px) {

#columns, #header, .region-leaderboard .block-content, #nav-wrapper .container, #breadcrumb-wrapper, .homeRotator {
	width: 100%!important;
}

#nav-wrapper .container {
	padding-bottom: 0!important;
}

#page-title {
	font-size: 2.3em;
}

.homeRotator {
	padding: 0;
	overflow: hidden!important;
}

.homeRotatorWrapper .block-inner.clearfix {
	margin: 0;
	background: #fff;
}

.field-name-field-images .field-item {
	float: left;
	margin: 10px!important;
	width: 29%;
}

.block-1-3 {
	width: 29.2%;
}



.homeRotator .views-field-title,
 .homeRotator .views-field-body  {
	position: relative;
	background: rgba(12, 34, 75, 0.8);
	width: 100%;
	box-sizing: border-box;
	padding: 14px 70px;
	top: 0;
}

.homeRotator .views-field-title {
	padding-top: 40px;
	font-size: 1.5em;
	padding-bottom: 0;
}

.homeRotator .views-field-body p {
	font-size: 1.1em;
}

.homeRotator .views-field-title .field-content {
	width: 100%!important;
}

.homeRotatorWrapper {
	max-height: 530px;
}

.iadRotator p {
	padding-top: 0px;
}

}

/* Breakpoint 2 @ 960px */
@media only screen and (max-width:960px) {

 .membership .column-1-2 {
 	width: 100%;
 }
 
 .becomeMember:after {
 	border-width: 0;
 }
 
 .joinLink {
 	height: auto;
 	padding: 10px 0;
 	margin-bottom: 30px!important;
 }
 
 .not-front .view-lectures .views-row {
 	padding-bottom: 40px;
 }
 .not-front .view-lectures .views-field-field-lecture-image {
	float: none;
	width: 100%;
}
	}

/* Breakpoint 3 @ 768px */

@media only screen and (max-width:768px) {

	#page-title {
		font-size: 1.9em;
	}
	
	.frontText p,
	.becomeMember h3 {
		font-size: 1.2em;
	}
	
	.joinLink a {
		font-size: 1.5em;
	}
	
	.breadcrumb-wrapper.clearfix {
		margin-left: 0!important;
		}
	
	.field-name-field-images .field-item {
		float: left;
		margin: 10px!important;
		width: 44%;
	}	
	
	.block-1-3 {
		width: 100%;
		border-top: 1px solid #eef1f1;
		border-right: 0;
		padding-right: 0;
		padding-top: 30px;
		min-height: 0;
		margin-bottom: 0px;
		padding-bottom: 15px;
	}
	
	.block-1-3 p a {
		position: relative;
	}
	
	.projectRow img {
		float: none;
		max-width: 100%;
		width: 100%;
		height: 100%;
	}
	
	.iadView .views-field-field-single-image {
		float: none;
		width: 100%;
	}
	
	.section-lecture .field-name-field-lecture-image {
		float: none;
		width: 100%;
		margin: 0;
		margin-bottom: 20px;
	}
	
	.snackRow img {
		float: none!important;
		clear: both!important;
	}
	
	.fbIcon {
		position: absolute;
		right: 85px;
		bottom: -40px;
		width: 70px!important;
	}
	
	.fbIcon p {
		width: 35px;
		height: 35px;
	}
	.fbIcon img {
		width: 24px!important;
		height: auto!important;
		top: 5px!important;
		left: 5px!important;
	}

/* @group Untitled Group */



/* @end */
}

/* Breakpoint 4 @ 520px */

@media only screen and (max-width:520px) {
	.region-header .aiaLogo img {
		display: none;
	}
	
	.region-header .aiaLogo a:after {
		content: "";
		display: block;
		width:320px;
		height: 100px;
		background: url("./images/aialogo-with-subtitle-mobile.png") no-repeat;
		background-size: 100%;
	}
	
	.field-name-field-images .field-item {
		float: left;
		margin: 0px!important;
		width: 100%;
	}
	
	.joinLink a {
		padding-left: 50px;
	}
	
	.joinLink a:hover {
		padding-left: 0px;
	}
	
	.footerContent img {
		width: 90%!important;
		height: 100%!important;
	}
	
	.form-text,
	.form-textarea {
		width: 100%;
		box-sizing: border-box;
	}
}

/* Breakpoint 5 @ 320px */

@media only screen and (max-width:320px) {
	.region-header a:after {
		width:100%;
		height: 80px;
	}
}