.slide {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: left;
  display: inline-block;
/* 
  text-align: center;
  background: #d2d2d2;
 */
}

/* 
.slide {
  width:200px;
  height:100%;
  position:absolute;
  right:-200px;
  top:0;
  background:#d2d2d2;
}
 */

/* 
#close {
  position:absolute;
  right:10px;
  top:10px;
  z-index:10;
  display:none;
}
 */

#right-content {
	text-align: center;
	width: 100%;
/*	
  position:absolute;
  right:0;
  top:0;
  overflow:hidden;
  width:200px;
  height:100%; 
*/
}

/* https://stackoverflow.com/questions/43446745/onclick-changing-content-on-div */

/*mobile first */
.pathways-desktop {
	display: none;
}
.pathways-mobile {
	display: block;
	line-height: 0 !important;
}
.pathways-mobile img {
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.gpunit .unit {
	padding-top: 1rem !important;
}

/*These classes are for the areas of study pages on mobile (defaults)*/

.AoS-main {
	padding-top: unset;
}

.FlexibleLandingContent {
	margin-top: -3rem;
}

.unit.FlexibleContent {
	padding-top: 0rem;
}

.aos-container {
	display: none;
/* 	display: flex; */
/* 	flex-wrap: wrap; */
}

.aos-container .aos-area {
	width: 180px;
	margin: 1px;
	text-align: center;
	flex-grow: 1;
	flex: 100%;
}

.aos-all {
	width: 100%;
	margin: 1px;
	text-align: center;
	flex-grow: 0;
/* 	background-color: #f1f1f1; */
/* 	min-height: 75px; */
	height: auto;
	display: inline-block;
}

.aos-area img, .aos-all img {
	width: 100%;
	cursor: pointer;
	display: block;
}


/* CSS for the EMSI CC salary plugin */

.isolzr { /*this is the EMSI "footer" that looks tacky*/
	display: none !important;
}

.cc-card { /*this is the card spacing*/
	margin-bottom: 10px;
}

.cc-content-link { /*this is the EMSI button text size and color*/
	background-color: #ba0c2f !important;
	font-size: initial !important;
}

.cc-content-salary { /*this is the EMSI salary color*/
	color: #ba0c2f !important;
}


@media only screen and (min-width: 680px) {
/* This is for desktop display of 4 columns of icons*/

.aos-container {
	display: flex;
	flex-wrap: nowrap;
}

.aos-container .aos-area {
	width: 180px;
	margin: 2px;
	text-align: center;
	flex-grow: 1;
	transition: all 200ms ease-out;
	box-shadow: none;
	line-height: initial;
}

.aos-all {
	width: 100%;
	margin: 2px;
	text-align: center;
	flex-grow: 1;
	transition: all 200ms ease-out;
	box-shadow: none;
	line-height: initial;
}

.aos-area:hover, .aos-all:hover {
	box-shadow: 0 0 12px rgb(102, 102, 102);
	z-index: 1;
}

.pathways-desktop {
	display: inline-block;
	line-height: 0;
}

.pathways-desktop img {
	margin: .5rem;
	max-width: 22%;
	cursor: pointer;
}

.pathways-mobile {
	display: none;
}

.gpunit .unit {
	padding-top: 1rem !important;
}

/*These classes are for the areas of study pages on desktop */

.AoS-main {
	padding-top: 4rem;
}

.FlexibleLandingContent {
	margin-top: -5rem;
}

.unit.FlexibleContent {
	padding-top: 0rem;
}

.spaceman::after {
	content: "";
	clear: both;
	display: table;
}

.FlexibleLandingContent .inner {
	padding: 2%;
	max-width: 80rem;
}

} /* <-- This is closing the media query*/




/*This is the styling for the home page flex row */

.GPFlexParent {
  display: flex;
  flex-direction: column;
}

.CPFlexChild {
  text-align: center;
  margin: auto;
  padding: 4px 1%;
  width: 100%;
  cursor: pointer;
  color: white;
  font-weight: 600;
  float: right;
  vertical-align: middle;
  line-height: 1.3;
}

	.GPFlexParent > .art {
		background-color: #EAD04B;
	}
	.GPFlexParent > .business {
		background-color: #A0B85F;
	}
	.GPFlexParent > .industrial {
		background-color: #EA973E;
	}
	.GPFlexParent > .culinary {
		background-color: #5D559E;
	}
	.GPFlexParent > .health {
		background-color: #3074AC;
	}
	.GPFlexParent > .human {
		background-color: #78BED2;
	}
	.GPFlexParent > .scieng {
		background-color: #DA3831;
	}

.CPFlexChild > img {
	margin: auto;
	max-width: 25%;
	float: left;
}

.CPFlexChild > span {
	vertical-align: middle;
	white-space: break-spaces;
}

.CPFlexChild > span:before {
	content: '\A';
}



@media only screen and (min-width: 680px) {
/* This is for desktop displays wider than 680px*/
  
	.GPFlexParent {
	  display: table;
	}
	
	.CPFlexChild {
	  display: table-cell;
	  text-align: center;
	  width: 13%;
	  transition: all 200ms ease-out;
      box-shadow: none;
	  float: unset;
	  vertical-align: top;
	}

	.CPFlexChild:hover {
	  box-shadow: 0 0 12px rgb(102, 102, 102);
	  z-index: 1;
	}
	
	.CPFlexChild > img {
	  max-width: 100%;
	  float: unset;
	}
	.CPFlexChild > span:after {
	content: '\A\A';
}

}